鼠标经过离开解决方案

开门见山：在做鼠标经过离开离开一个区域时候触发一个事件的时候遇到了些问题，鼠标经过离开区域的子元素也同样会触发事件。这与本来的想法违背。后来找了几个解决方案。

一开始的代码

HTML

<div id=\'div1\'>
    div1
    <p id="p1">p1<span id="span1">span1</span></p>
    <p id="p2">p2<span id="span2">span2</span></p>
    <p id="p3">p3<span id="span3">span3</span></p>
</div>

$("#div1").bind("mouseover", function(){
    alert("trigger event");
});

结果是鼠标从div1外面经过没有问题。每从一个子元素出来经过div1都会触发事件。这不是我们要的效果。

方案1:对其进行判断，如果是div1就触发事件。重要的是清楚逻辑。

鼠标经过有4中方式。红色代表可行，黑色代表不可行。方案1的代码如下

$("#div1").bind("mouseover", function(event){
    if( !(this == event.relatedTarget) && !$(this).find(event.relatedTarget)[0]){
        alert("trigger event");
    }
});

PS：之前在比较event.target是否子元素的我sb了。用$("#div1").find("#p1") == $("p1")类似的代码判断是否为子元素。

仔细查看是new一个对象返回来。这比较肯定行不通。

console.log($)

function ( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }

方案2：用a.compareDocumentPosition(b)。获取 a 和 b 元素之间的位置关系。

compareDocumentPosition的用法。

compareDocumentPosition的值有4种：祖先：20（10100）后代10（01010）前面（00100）后面（00010）本身（00000）

根据这个原理可以很快的改进方案一的代码：

$("#div1").bind("mouseover", function(event){
    var p = this.compareDocumentPosition(event.relatedTarget);
    if(p != 20 && p != 0){
        alert("trigger event");
    }
});

方案3：jQuery推荐使用mouseenter/mouseleave

$("#div1").bind("mouseenter", function(event){
    alert("trigger event");

});

鼠标经过离开 解决方案

鼠标经过离开解决方案