如何解绑jQuery中.on()绑定的事件？兼谈外部点击监听方案

云上老周

2026-7-11

点击指定区块外事件的精准解绑原理解析

需求与问题

需要实现监听用户点击指定区块外的操作，同时解绑由jQuery .on() 绑定的对应事件，且不能影响同一目标上的其他事件。

踩坑过程

一开始给 $('*') 绑定click事件，解绑时用 $('*').off('click')，结果因为绑定了太多同类事件，导致系统异常。
后来试了 .one() 方法，但受限于DOM结构没成功。
最后用 $(this).off(event) 实现了精准解绑，就算同一目标上绑定了多个事件也能正常工作，但不清楚具体原理。

可行代码示例（编辑补充）

$("body").on("click",function(event){
    // 点击#yourdiv外部时移除该元素并解绑事件
    if( ! $("#yourdiv").is(event.target)){
        $("#yourdiv").remove()
        // 解绑当前事件
        $(this).off(event)
    }
})

DOM结构示例

<div id="container">
    <div class="block_1">
        <div class="exclude"></div>
    </div>
    <div class="block_2">
        <div class="not_exclude"></div>
    </div>
</div>

最终解决代码

$("#container").on("click",function(event){
    event.stopPropagation();
    if(!$(".exclude").is(event.target)){
        // 执行需要的操作
        $(this).off(event)
    }
})

原理解析

当用jQuery的.on()绑定事件时，每个事件处理函数都会和触发时生成的**事件对象（event）**建立关联。$(this).off(event)的工作逻辑很直接：

这里传入的event是当前触发事件的实例，它内部保存了指向当前执行的这个事件处理函数的引用。
jQuery的.off()方法支持接收事件对象作为参数，此时它会精准定位到和这个事件对象绑定的那一个处理函数，只解绑这一个，不会碰同一元素上的其他click事件，也不会影响其他类型的事件。
对比直接用$(this).off('click')会把该元素上所有click事件都解绑，off(event)就做到了单个事件处理函数的精准移除，这就是它能在多事件共存场景下正常工作的核心原因。