js mouseout和mouseover移动到子元素禁止触发事件 最好不要用它 最好用 mouseleave 来达到 移动到子元素禁止触发事件 的效果

直接举出 实例讲解：

<ul id="out">

<li>111</li><li>222</li><li>333</li>

</ul>

上面这个结构，希望在在ul上绑定mouseout事件，移开ul时触发事件

但是实际情况是当鼠标移动到它的子元素li上面时，也会触发mouseout事件，移动到子元素时由于事件冒泡，移动到子元素的过程被认为是先移出了ul，再进入li；

这个问题考虑了很久，请教的高人才得到解决（本人目前能力还有限~呵呵）

解决办法也很简单：

jQuery.fn.isChildAndSelfOf = function(b){//jquery扩展功能

return (this.closest(b).length > 0);

};//判断这个元素移出时是从移出了自身，还是移动到子元素上面了，下面详细解释

$(function(){

$("#out").bind("mouseout",function(e){

    alert(!$(e.relatedTarget).isChildAndSelfOf("#out"));

    if(!$(e.relatedTarget).isChildAndSelfOf("#out"))//移动到子元素上面则不触发事件

    {

       alert(e.target.id);

     }

});

});

这个里面用了两个不是很常用的属性：

1.closest() 方法获得匹配选择器的第一个祖先元素；

如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。

从当前元素开始,沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。

当移动到子元素上面时：$(e.relatedTarget)是li，它的closest(“#out”)存在；

当移动到ul外面时： $(e.relatedTarget)是外面的元素，("#out")不可能在它的祖先元素中，所以closest(“#out”)不存在；

2. relatedTarget 事件属性返回与事件的目标节点相关的节点。

对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。

对于其他类型的事件来说，这个属性没有用

下面是刚刚更新的文章，继续深入探讨mouseout和mouseover，还有mouseenter和mouseleave的文章：

js下 mouseleave事件和mouseout的区别以及解决firefox下使用方法

jQuery中mouseover/mouseout/mouseenter/mouseleave区别和分析


来自  http://hi.baidu.com/tang_guangyao/item/c5be8516480d23fdbe9042e4



下面是测试代码

<script src="http://code.jquery.com/jquery-latest.js"></script>
<ul id="out">
<li id="li1">111</li><li id="li2">222</li><li id="li3">333</li>
</ul>
<script>
jQuery.fn.isChildAndSelfOf = function(b){//jquery扩展功能
alert(b);
return (this.closest(b).length > 0);
};
$('#out').mouseout(function(e){
if(!$(e.relatedTarget).isChildAndSelfOf("#out"))//移动到子元素上面则不触发事件
    {
    alert(111);
       alert(e.target.id);
     }
});
</script>