Question

我有一个简单的搜索表单：

<div>
  <input id="searchArea" type="text" value="" placeholder="Enter your search terms">
  <button id="searchButton">Search</button>
</div>

以及控制它的javascript片段：

function searchFunction() {
  console.log("This is a POST request being send to the server");
}

$("#searchButton").on("click", function(e) {
  e.preventDefault();
  searchFunction();  
})

$("#searchArea").on("change", function(e) {  
  e.preventDefault();
  searchFunction();
});

问题是点击和更改功能重叠，因此我得到以下内容：

当我在文本框中输入内容然后单击屏幕中的其他位置时，searchFunction会被正确触发，但如果＆＃34;其他地方＆＃34;成为搜索按钮，然后searchFunction双击。

我的问题是：一旦进入click处理程序，是否有任何方法可以取消change处理程序，否则会导致searchFunction加倍？

请注意searchArea和searchButton没有亲子关系，这意味着preventDefault和stopPropagation这样的传统方法无法发挥作用。

您可以在此fiddle中看到它的实际效果。

提前致谢

来自不同元素的重叠事件在JQuery中激发相同的功能

0 个答案: