остановить событие для регистрации нескольких событий для одного и того же элемента в js

Question

Предположим, есть несколько регистраций событий на одном элементе.

Если определенное условие соответствует, выполнить только одно событие и остановить другие.например, для случая ниже, если кто-то вводит «1» в поле ввода, выведите только «hello», в противном случае выведите «hello world» (другая строка).

$(document).on("click","#12",function(e){
  if($("#1").val() == 1){
    e.stopImmediatePropagation();
    e.stopPropagation();  // do something that will stop other regestraion to run
  }
  fun();
});

$("#12").on("click",function(e){     //third party js
  console.log("world");
});

function fun(){
  console.log("hello");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="1">
<button id="12" class="12">click</button>

Возможно ли вообще добиться чего-то подобного? Если да, то как?(Я не смог найти ничего похожего на вопрос по net или stackoverflow)

Редактировать: - Способ регистрации события другой.Я не могу выполнить регистрацию так, как это делает сторонняя организация, так как сторонние js загружаются после некоторых событий щелчка, и после этого появится окно ввода.

Answer 1

Вы можете использовать захват событий .События переходят в Элемент из документа и всплывают обратно в документ, после чего вы можете остановить события.Если вы обрабатываете события в фазе по умолчанию, ваши обработчики будут вызываться после, если вы не можете убедиться, что зарегистрировали их вначале.

Вы можете играть с функцией на этой ручке из этой статьи

Отказ от ответственности: захват событий - это функция, которая должна использоваться только кодом очень низкого уровня и должнаиспользуется в качестве последнего ресурса, если вы не работаете над чем-то очень общим, что здесь не так.Случай из реальной жизни, который я видел, относится к модалам, поскольку он должен полностью блокировать пользовательский ввод извне модала (не просто скрыть его за DIV и позволить пользователю сосредоточиться на чем-то другом с помощью клавиатуры).

На этой странице есть хороший пример ловушек использования stopPropagation() чуть выше секции захвата;stopImmediatePropagation() еще хуже, потому что он также зависит от порядка регистрации событий.Выполнение этого в фазе захвата может повлиять на большое количество кода, будьте осторожны .

$(document).on("click", "#12", function(e) { //third party js
  console.log("world");
});

function captureHandler(e) {
  if (e.target.id != "12") return;

  if ($("#1").val() == 1) {
    e.stopPropagation();
  }
  fun();
}
// Third parameter says use the capture phase
document.addEventListener('click', captureHandler, true);

function fun() {
  console.log("hello");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="1">
<button id="12" class="12">click</button>

И, очевидно, все еще работает для оригинального случая

function captureHandler(e) {  
  if (e.target.id != "12") return;
   
  if ($("#1").val() == 1) {
    e.stopPropagation();
  }
  fun();
}
document.addEventListener('click', captureHandler, true);

function fun() {
  console.log("hello");
}

$(document).on("click", "#12", function(e) { //third party js
  console.log("world");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="1">
<button id="12" class="12">click</button>

Answer 2

$(document).on("click","#12",function(e){
  if($("#1").val() == 1){
    e.stopImmediatePropagation();;  // do something that will stop other regestraion to run
  }
  fun();
});

$(document).on("click","#12",function(e){     //third party js
  console.log("world");
});

function fun(){
  console.log("hello");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="1">
<button id="12" class="12">click</button>

Это то, что вы хотите?Источник: https://api.jquery.com/event.stopimmediatepropagation/

Примечание

Это не работает, если сторонняя библиотека сначала запускает свой код и вы, вероятно, не сможете изменить стиль делегирования.сторонней библиотеки, которая требуется для работы этого решения.

$(document).on("click","#12",function(e){     //third party js
  console.log("world");
});


$(document).on("click","#12",function(e){
  if($("#1").val() == 1){
    e.stopImmediatePropagation();;  // do something that will stop other regestraion to run
  }
  fun();
});


function fun(){
  console.log("hello");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="1">
<button id="12" class="12">click</button>