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

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

我想补充一个“晚”的答案，因为我今天在改变、keyup和搜索方面很挣扎，也许我最后发现的东西对其他人也有用。 基本上，我有一个搜索类型面板，我只是想对小X的压力做出正确的反应(在Chrome和Opera下，FF没有实现它)，并清除内容面板作为结果。

我有这样的代码:

 $(some-input).keyup(function() { 
    // update panel
 });

 $(some-input).change(function() { 
    // update panel
 });

 $(some-input).on("search", function() { 
    // update panel
 });

(它们是分开的，因为我想检查在什么时候以及在什么情况下调用它们)。

事实证明Chrome和Firefox的反应是不同的。 特别是，Firefox将更改视为“对输入的每一次更改”，而Chrome则将其视为“当焦点丢失和内容更改时”。 因此，在Chrome上的“更新面板”函数被调用一次，在FF上的每一次击键都被调用两次(一次在keyup，一次在change)

此外，用小X清除字段(在FF下不存在)在Chrome下触发搜索事件:没有keyup，没有变化。

结论?使用input代替:

 $(some-input).on("input", function() { 
    // update panel
 }

在我测试的所有浏览器中，它都具有相同的行为，对输入内容的每一次更改都做出反应(包括使用鼠标复制粘贴、自动补全和“X”)。

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

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

实际上，每当用户搜索或单击“x”时，都会触发一个“search”事件。这特别有用，因为它理解“增量”属性。

现在，话虽如此，我不确定你是否能说出点击“x”和搜索之间的区别，除非你使用“onclick”黑客。不管怎样，希望这对你有所帮助。

多托罗网络参考

我相信这是唯一的答案，只有当x被点击。

然而，这有点俗气，ggutenberg的答案对大多数人都适用。

$('#search-field').on('click', function(){
  $('#search-field').on('search', function(){
    if(!this.value){
      console.log("clicked x");
      // Put code you want to run on clear here
    }
  });
  setTimeout(function() {
    $('#search-field').off('search');
  }, 1);
});

其中“#search-field”是输入的jQuery选择器。使用'input[type=search]'选择所有搜索输入。通过在单击字段后立即检查搜索事件(Pauan的答案)来工作。

完整的解决方案在这里

这将在单击搜索x时清除搜索。 或 当用户按回车键时，将调用搜索API。 这段代码可以通过附加的esc键up事件匹配器进一步扩展。但是这个应该能搞定。

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

欢呼。