JS中同一元素多事件注册时如何按需阻止其他事件执行？

当然可以实现这个需求！咱们先理清楚问题的核心矛盾：第三方事件是后加载且直接绑定在动态生成的按钮上，而我们需要在特定条件下拦截它的执行，同时保留自己的事件逻辑。下面是具体的解决思路和代码实现：

为什么原代码无法生效？ #

你原来的代码里用了e.stopImmediatePropagation()，但这个方法只能阻止同一事件绑定器上的后续事件执行。第三方事件是直接绑定在按钮#12上的，而你的事件是委托在document上的，两者属于不同的事件队列，所以根本阻止不了第三方事件的执行。更关键的是，直接绑定在元素上的事件会比委托在document上的事件先触发，等你的委托事件执行时，第三方的world已经打印出来了。

正确的解决思路：利用事件捕获阶段拦截 #

浏览器的事件流分为「捕获阶段→目标阶段→冒泡阶段」，jQuery默认是在冒泡阶段绑定事件。我们可以用原生JS的addEventListener，通过第三个参数true在捕获阶段绑定事件，这样我们的事件会在所有冒泡阶段的事件（包括第三方的直接绑定事件）之前触发，从而实现条件拦截。

完整代码实现 #

HTML部分（模拟动态生成元素） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 容器用于动态生成输入框和按钮 -->
<div id="dynamic-container"></div>

JS部分 #

// 1. 绑定捕获阶段的事件委托，监听动态生成的按钮点击
document.addEventListener('click', function(e) {
  // 确认点击的是目标按钮#12
  if (e.target.id === '12') {
    // 获取输入框的值（注意：输入框的value是字符串类型，要和"1"做比较）
    const inputValue = document.getElementById('1').value;
    
    if (inputValue === '1') {
      // 阻止事件继续传播，后续的目标/冒泡阶段事件（包括第三方的）都不会执行
      e.stopPropagation();
      // 额外阻止同一捕获阶段的其他事件执行（保险起见）
      e.stopImmediatePropagation();
    }
    
    // 执行我们的hello逻辑
    fun();
  }
}, true); // 第三个参数true表示在捕获阶段触发事件

// 自定义的hello函数
function fun() {
  console.log("hello");
}

// 模拟输入框和按钮后续动态生成的场景
setTimeout(() => {
  document.getElementById('dynamic-container').innerHTML = `
    <input type="number" id="1">
    <button id="12" class="12">click</button>
  `;
}, 500);

// 模拟第三方JS后加载并绑定事件的场景
setTimeout(() => {
  $("#12").on("click", function(e){
    console.log("world");
  });
}, 1000);

逻辑说明 #

• 捕获阶段的事件委托会优先触发：不管按钮什么时候生成，document级别的捕获事件都能捕获到它的点击动作。
• 条件判断与拦截：
  • 当输入框值为"1"时，stopPropagation()会阻止事件流向目标阶段和冒泡阶段，第三方绑定在按钮上的事件就不会执行，最终只打印hello。
  • 当输入框值不为"1"时，不阻止事件传播，我们的hello先打印，随后第三方的world也会正常打印，完全符合需求。
• 全程不需要修改第三方代码，完美适配动态元素和第三方后加载的场景。

内容的提问来源于stack exchange，提问作者yajiv