我还不如把我的5c也加进去。

keyup事件不检测鼠标单击X以清除字段，但输入事件检测击键和鼠标单击。您可以通过检查事件的originalEvent属性来区分触发输入事件的事件—它们之间有相当多的区别。

我发现最简单的方法如下:

jQuery("#searchinput").on("input",function(event) {
      var isclick = event.originalEvent.inputType == undefined;
   }   

通过击键，event.originalEvent.inputType = "insertText"。

我使用Chrome -没有在其他浏览器中测试，但鉴于事件对象是相当普遍的，我猜这将在大多数情况下工作。

注意，仅仅单击输入不会触发事件。

对我来说，点击X应该算作一个更改事件是有意义的。我已经设置了onChange事件来做我需要它做的事情。所以对我来说，修复是简单地做这一行jQuery:

$('#search').click(function(){ $(this).change(); });

基于js的事件循环，点击clear按钮将在输入时触发搜索事件，因此下面的代码将正常工作:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

上面的代码，点击事件预约了这个。_cleared = false事件循环，但该事件将始终在onsearch事件之后运行，因此您可以稳定地检查this。_cleared状态，以确定用户是否刚刚点击X按钮，然后触发onsearch事件。

这可以在几乎所有的条件下工作，粘贴文本，具有增量属性，ENTER/ESC键按下等。

在我的情况下，我不想使用JQuery和我的输入也是通用的，所以在某些情况下，它可以是类型“搜索”，但并不总是这样。我可以让它稍微延迟一点基于这里的另一个答案。基本上，我想在单击输入时打开一个组件，而不是在单击clear按钮时打开。

function onClick(e: React.MouseEvent<HTMLInputElement>) {
  const target = e.currentTarget;
  const oldValue = target.value;
  setTimeout(() => {
    const newValue = target.value;
    if (oldValue && !newValue) {
      // Clear was clicked so do something here on clear
      return;
    }

    // Was a regular click so do something here
  }, 50);
};

我还不如把我的5c也加进去。

keyup事件不检测鼠标单击X以清除字段，但输入事件检测击键和鼠标单击。您可以通过检查事件的originalEvent属性来区分触发输入事件的事件—它们之间有相当多的区别。

我发现最简单的方法如下:

jQuery("#searchinput").on("input",function(event) {
      var isclick = event.originalEvent.inputType == undefined;
   }   

通过击键，event.originalEvent.inputType = "insertText"。

我使用Chrome -没有在其他浏览器中测试，但鉴于事件对象是相当普遍的，我猜这将在大多数情况下工作。

注意，仅仅单击输入不会触发事件。

2022简单，易读，简短的解决方案

哇，这么简单的问题居然有这么复杂的答案。

只需在你的搜索输入中添加一个“输入”监听器，当用户在输入中键入某些内容或单击清除图标时，它就会捕捉到。

document.getElementById（'searchInput'）.addEventListener（'input'， （e） => { console.log（'Input value： “${e.currentTarget.value}”'）; }) <输入 id=“搜索输入” 类型=“搜索” 占位符=“搜索” />

如果你不能使用ES6+，那么下面是转换后的代码:

document.getElementById('searchInput').addEventListener('input', function(e) { 
  // Yay! You make it in here when a user types or clicks the clear icon
})`