JavaScript中如何在自定义事件处理函数中阻止原触发事件后续代码运行

问题根因 #

你调用的几个事件方法都不生效，核心原因是自定义事件response.beforeSave和按钮的click是两个完全独立的事件实例：

• e.stopPropagation()仅能阻止自定义事件本身的冒泡传播
• e.stopImmediatePropagation()仅能阻止该自定义事件后续绑定的其他回调执行
• 两类方法都完全不会干涉到外层click事件的代码执行流程，所以触发完自定义事件后click的后续代码还是会正常跑。

可行解决方案 #

方案1：通过自定义事件的preventDefault状态判断 #

你可以手动创建自定义事件实例，在满足终止条件时调用e.preventDefault()标记状态，触发完事件后主动判断状态决定是否终止后续代码：

$("#btn").click(function() {
  console.log("triggering event");

  // 手动创建自定义事件实例
  const saveBeforeEvent = jQuery.Event("response.beforeSave");
  $(document).trigger(saveBeforeEvent);

  // 如果自定义事件被标记了阻止默认行为，直接终止click事件后续代码
  if (saveBeforeEvent.isDefaultPrevented()) {
    return;
  }

  console.log("after trigger. This should not get invoked.");
})

$(document).off("response.beforeSave").on("response.beforeSave", function(e) {
  console.log("start subscriber");

  if (true) { // 满足终止条件时
    e.preventDefault();
    return;
  }

  console.log("exit subscriber. This should not get invoked.");
});

配套HTML和你原有代码一致即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="button">Click Me</button>

方案2：通过回调返回值判断 #

也可以用triggerHandler触发自定义事件，直接接收事件回调的返回值判断是否需要终止：

$("#btn").click(function() {
  console.log("triggering event");

  // triggerHandler会返回自定义事件回调的返回值
  const needStop = $(document).triggerHandler("response.beforeSave");
  if (needStop) {
    return;
  }

  console.log("after trigger. This should not get invoked.");
})

$(document).off("response.beforeSave").on("response.beforeSave", function(e) {
  console.log("start subscriber");

  if (true) { // 满足终止条件时
    // 返回true代表需要终止外层click事件后续代码
    return true;
  }

  console.log("exit subscriber. This should not get invoked.");
});

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