javascript — перекрывающиеся события из разных элементов дважды запускают одну и ту же функцию в JQuery

Перекрывающиеся события из разных элементов дважды запускают одну и ту же функцию в JQuery

У меня есть мертвая простая форма поиска:

 {amp}lt;div{amp}gt; {amp}lt;input id="searchArea" type="text" value="" placeholder="Enter your search terms"{amp}gt; {amp}lt;button id="searchButton"{amp}gt;Search{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; 

и фрагмент 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 что-то в текстовом поле и затем searchFunction в другом месте экрана, searchFunction запускается правильно, но если «в другом месте» становится кнопкой поиска, тогда searchFunction дважды.

У меня такой вопрос: попав внутрь обработчика click , есть ли способ отменить запуск обработчика change который в противном случае вызвал бы двойную стрельбу searchFunction ?

Имейте в виду, что searchArea и searchButton не имеют отношения родитель-потомок, что означает, что обычные методы, такие как preventDefault и stopPropagation , не будут работать.

Вы можете увидеть это в действии в этой скрипке .

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector