停止事件以在js中为同一元素注册多个事件

Question

假设同一元素上有多个事件注册。

如果某个条件匹配，则只执行一个事件并停止其他事件。例如如果有人输入＆＃34; 1＆＃34;在输入框中只打印＆＃34; hello＆＃34;，否则打印＆＃34; hello world＆＃34;（不同的行）。

＆＃13;

＆＃13;

$(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");
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

是否有可能实现这样的目标？如果是，那么如何？ （我在net或stackoverflow问题上找不到类似的东西）

编辑： - 事件注册方式不同。我不能按照第三方的方式进行注册，因为第三方js在一些点击事件后加载，输入框将在此之后加载。

Answer 1

＆＃13;

＆＃13;

$(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");
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是你想要的吗？ 资料来源：https://api.jquery.com/event.stopimmediatepropagation/

注意

如果第三方库首先运行其代码并且您可能无法更改此解决方案工作所需的第三方库的委派方式，则此功能无效。

＆＃13;

＆＃13;

$(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");
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用event capturing。事件从文档遍历元素并回显到文档中，然后您可以停止事件。如果您正在处理默认阶段的事件，那么如果您无法确定首先注册事件，则会调用您的处理程序。

您可以使用该文章中的功能on this pen

免责声明：事件捕获是一项功能，只应由非常低级别的代码使用，并且如果您不处理非常通用的事情，则应将其用作最后一个资源。这里。我见过的真实案例是模态，因为它需要完全阻止来自模态外部的用户输入（不只是将其隐藏在DIV后面，让用户用键盘专注于其他东西）。

This page有一个很好的例子，说明在捕获部分上方使用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>