如何用jQuery取消DOM元素点击事件并覆盖后续绑定的同类事件？

要实现无论绑定顺序，点击#mydiv时仅执行当前函数后续代码，禁用所有其他点击事件，可以通过以下核心思路实现：

推荐方法：事件捕获+阻止后续事件执行 #

jQuery默认在冒泡阶段绑定事件，我们可以将当前点击事件绑定到捕获阶段（优先于所有冒泡阶段事件触发），再通过e.stopImmediatePropagation()阻止当前元素上所有后续事件处理器的执行——不管是之前还是之后绑定的事件，也不管是捕获还是冒泡阶段的事件。

修改后的代码如下：

jQuery(document).ready(function( $ ){
    // 绑定到捕获阶段（第三个参数为true）
    jQuery("#mydiv").on("click", null, true, function(e){
        // 阻止当前元素所有后续事件处理器执行
        e.stopImmediatePropagation();
        // 此处写你要执行的后续代码
        console.log("仅执行这段代码，其他点击事件全被禁用");
    })      
});

关键说明： #

• on("click", null, true, handler)：第三个参数true表示在捕获阶段触发事件，会比所有冒泡阶段的事件先执行。
• e.stopImmediatePropagation()：不仅阻止事件冒泡，还会阻止当前元素上所有尚未执行的事件处理器，彻底阻断其他点击事件的执行。

备选方法：解绑现有事件再绑定当前事件（仅适用于无需处理后续动态绑定的场景） #

如果不需要考虑当前代码之后动态绑定的点击事件，可以先解绑#mydiv上所有已有的click事件，再绑定当前事件：

jQuery(document).ready(function( $ ){
    jQuery("#mydiv").off("click").click(function(e){
        // 此处写你要执行的后续代码
        console.log("仅执行这段代码，之前绑定的点击事件已被移除");
    })      
});

注意：这个方法只能清除当前代码执行前绑定的事件，之后动态绑定的click事件依然会生效，无法满足“覆盖后续绑定事件”的需求。

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