鼠标经过离开 解决方案

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

一开始的代码

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>

JS

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

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

 

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

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

JS

$("#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）

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

JS

$("#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");

});