滑鼠經過離開解決方案

開門見山：在做滑鼠經過離開離開一個區域時候觸發一個事件的時候遇到了些問題，滑鼠經過離開區域的子元素也同樣會觸發事件。這與本來的想法違背。後來找了幾個解決方案。

一開始的代碼

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");

});

滑鼠經過離開 解決方案

滑鼠經過離開解決方案