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

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 срабатывает правильно, но если "в другом месте" становится кнопкой поиска, то searchFunction двойные огни.

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

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

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

заранее спасибо