jQuery解除绑定---标题描述不清请大神进来看一眼

[BunnyMelody]

现有一个demo设计如下：

<div id="main_container">
    <div id="sub_container">sub</div>
    <ul id="sub_ul">
        <li>li<li>
    </ul>
</div>

[#main_container]的height值很大，远大于[#sub_container][#sub_ul]
即：


现在给[#main_container]绑定了hover事件，这个事件是绑定在除了它的孩子[#sub_contanier]的任何一个元素及自身的，即有色的部分，如图


用了.not() :not() 都不能解除对[#sub_container]的hover绑定

求问大神如何解决？

[娃都会打酱油了]

unbind("mouseenter mouseleave")

[天际的海浪]

事件是会向上层元素冒泡的。就算子元素不绑定事件也会因为事件冒泡的原因触发父元素上的事件。 解决方法，要在子元素的事件中用event.stopPropagation() 停止事件向上层元素冒泡 $("#sub_contanier").hover(function(event){event.stopPropagation()} , function(event){event.stopPropagation()})

[tony4geek]

事件冒泡与事件捕获

[吴钦飞]

事件传播有两种：冒泡和捕获。这是事件机制本身的特性。 默认情况下是冒泡， 比如，你在 “#main”上面绑定了 click事件， 一旦你点击了“#main”的子元素“#sub”（或后代元素），click必定会传播到“#main”，直至文档的根元素； 即，click事件的冒泡 调用“#sub”元素上注册的click事件处理程序 调用“#sub”的父元素的click事件处理程序 调用“#sub”的祖父元素的click事件处理程序 。。。。。。 调用Document对象的click事件处理程序 调用Window对象的click事件处理程序 如果你想阻止这种事件传播，通用的方式是这样的：

    function cancelHandler ( event ) {

        var event = event || window.event;

        /*
         这里是处理事件的代码
         */


        if ( event.preventDefault ) event.preventDefault(); // 标准取消技术
        if ( event.returnValue ) event.returnValue = false; // IE8-

        // 使用对象属性或HTML属性注册的处理程序
        return false;
    }   

=========== 下面的是引用的《JavaScript权威指南》的一节============= 17.3.6 事件传播 当事件目标是 Window对象或单独的对象（如XMLHttpRequest）时， 浏览器简单地通过调用对象上适当的处理程序响应事件； 当事件目标是文档或文档元素时，情况比较复杂。 冒泡 调用在目标元素上注册的事件处理函数后， 大部分事件会“冒泡”到DOM树根元素 如，click事件的冒泡 调用目标元素上注册的click事件处理程序 调用目标的父元素的click事件处理程序 调用目标的祖父元素的click事件处理程序 。。。。。。 调用Document对象的click事件处理程序 调用Window对象的click事件处理程序 事件冒泡在为大量单独文档元素上注册处理程序提供了替代方案， 即在共同的祖先元素上注册一个处理程序来处理所有的事件； 如，可以在 <form> 元上注册“change”事件处理程序 来取代在表单的每个元素上注册“change”事件处理程序 事件传播的阶段 第一阶段：捕获阶段 第二阶段：调用目标处理程序 第三阶段：冒泡阶段 事件捕获 addEventListener()的第三个参数是一个布尔值： true，则事件处理程序被注册为捕获事件处理程序， 它会在事件传播的第一个阶段调用 事件冒泡得到了广泛的支持，它能在用在包括IE在内的所有浏览器； 事件捕获只能用于以 addEventListener()注册的 且第三个参数为true的事件处理程序中， 这意味着IE8-无法使用。 事件传播的捕获阶段像反向的冒泡阶段， 最先调用Window对象的捕获处理程序， 然后是Document对象的捕获处理程序， 接着是body对象的捕获处理程序， 再然后是DOM树向下的元素..... 直到目标的父元素的捕获事件处理程序。 在目标对象本身上注册的捕获事件处理程序不会被调用 事件捕获提供了在事件没有送达目标之前查看它们的机会； 事件捕获能用于程序调试， 事件取消技术（过滤掉事件使目标处理程序不会被调用）， 事件捕获常用于处理鼠标拖放， 因为要处理拖放事件的位置不能是这个元素内部的子元素。 通用取消技术取消事件默认操作 function cancelHandler ( event ) { var event = event || window.event; /* 这里是处理事件的代码 */ if ( event.preventDefault ) event.preventDefault(); // 标准取消技术 if ( event.returnValue ) event.returnValue = false; // IE8- // 使用对象属性或HTML属性注册的处理程序 return false; }

[BunnyMelody]

用这种方法的时候，解除的绑定是不确定的，偶尔生效，偶尔又不生效了，是因为网络环境比较复杂嘛 ？

引用 2 楼 jslang 的回复:

事件是会向上层元素冒泡的。就算子元素不绑定事件也会因为事件冒泡的原因触发父元素上的事件。 解决方法，要在子元素的事件中用event.stopPropagation() 停止事件向上层元素冒泡 $("#sub_contanier").hover(function(event){event.stopPropagation()} , function(event){event.stopPropagation()})

引用 2 楼 jslang 的回复:

事件是会向上层元素冒泡的。就算子元素不绑定事件也会因为事件冒泡的原因触发父元素上的事件。 解决方法，要在子元素的事件中用event.stopPropagation() 停止事件向上层元素冒泡 $("#sub_contanier").hover(function(event){event.stopPropagation()} , function(event){event.stopPropagation()})

[scscms太阳光]

需求有冲突。hover指鼠标经过，从最外进入黑线已经发生了事件，跟你里面子节点没有关系了。 除非你hover发生的是一个定时器，然后给#sub_container绑定另一个鼠标进入事件mouseenter把定时器给中断了。

[swimbar]

做这种测试的时候,最好把mousehover事件改成click事件 然后: document.getElementById('sub_container').onclick=function(){event.stopPropagation()} 你可以看到你要的效果