自定義「的mouseenter」功能不火

Question

Here's the JSFiddle.

我試圖讓在Chrome，Firefox等mouseenter工作中使用下面的函數：

var addMouseenter = (function() { 
    var contains = function (parent, elem) { 
      return parent.contains ? parent.contains(elem) : 
       !!(parent.compareDocumentPosition(elem) & 16); 
     }, 
     wrap = function (elem, method) { 
      return function (e) { 
       if (elem === e.target && !contains(elem, e.relatedTarget)) { 
        method.call(elem, e); 
       } 
      }; 
     }; 

    return function (elem, listener) { 
     var listener2 = wrap(elem, listener); 
     elem.addEventListener('mouseover', listener2, false); 
    }; 
}()); 

一切工作正常，直到我跑這個具體情況：

• 元素A具有mouseenter聽衆這些自定義的一個
• 元A包含元件B
• B元素是正對着單元A的邊緣
• 您輸入元素A在同一邊緣

我的期望是，mouseover事件將是對元件B觸發並冒泡到元素A.但是，似乎並非如此。我使用Chrome 13和Firefox 3.6進行測試，結果相同。我搞砸了嗎？

Answer 1

我的自定義功能不開火的原因是因爲它沒有工作。

I updated the fiddle顯示所有情況都應該如此。

我的錯誤只是檢查，看看e.target是否與我已經附加聽衆的元素相同。我需要檢查的是他們是否相同或如果e.target是孩子的元素。

當你真的快速將鼠標放在兩個方塊上時，它只會在內部方塊上註冊mouseover事件，並且由於我的偵聽器已連接到外部偵聽器，因此elem === e.target測試失敗。

所以我改變了if代碼在wrap功能如下：

if ((elem === e.target || contains(elem, e.target)) && 
    !contains(elem, e.relatedTarget)) { 
     e.stopPropagation(); 
     method.call(elem, e); 
} 

Answer 2

如果你不反對使用jQuery：

$(document).ready(function() { 
    $('#first').mouseover(function (e) { 
     if ($(e.target).attr('id') != 'second') { 
      alert('hello'); 
     } 
    }); 
}); 

試圖在你的的jsfiddle和它的作品： 當你進入綠色廣場不火;當你從外面進入紅場時，它會發火;當你從綠色方塊進入紅色廣場時，它會發射。這就是你想要的嗎？

new JSFiddle

或者保持你的JavaScript方式：

// Misc set-up stuff 
var greet = function() { alert('Hi, my name is "' + this.id + '."'); }, 
    first = document.getElementById('first'), 
    second = document.getElementById('second'); 

// The Actual Function 
var addMouseenter = (function() { 
    var contains = function (parent, elem) { 
      return parent.contains ? parent.contains(elem) : 
       !!(parent.compareDocumentPosition(elem) & 16); 
     }, 
     wrap = function (elem, method) { 
      return function (e) { 
       //if (elem === e.target && !contains(elem, e.relatedTarget)) { 
       if (elem === e.target && (e.target != second)) { 
        method.call(elem, e); 
       } 
      }; 
     }; 

    return function (elem, listener) { 
     var listener2 = wrap(elem, listener); 
     elem.addEventListener('mouseover', listener2, false); 
    }; 
}()); 

// GOGOGO 
addMouseenter(first, greet); 

http://jsfiddle.net/AUc88/