Jquery Mouseenter觸發父元素

我想創建一個螢火蟲類型滾動元素選擇器，但似乎有翻轉觸發父元素包含我的目標元素的問題。Jquery Mouseenter觸發父元素

請看下面的例子：

有在頁面上3個div的，所有的mouseenter /鼠標離開聽衆，最大的是完全獨立theother兩個，第二大是位置ontop的的最大，但不包含在其中，而最鹹的是嵌套在第二大，（它是父母）。如果你看源代碼，可能會更容易想象。

如果您單擊預覽並將鼠標懸停在中央div上，您會注意到第二大div也會繼續響應mouseenter事件並保持爲紅色。爲了解決這個問題，我嘗試添加$（this）.parent（）。trigger（「mouseout」）;在每個翻車監聽器上。

但是他們當你的鼠標離開最小（粉紅色）DIV，到中間（黑）格，中間的div不火（大概是因爲的mouseenter /鼠標懸停不被解僱的鼠標有我不明白，在這種情況下，我可以在每個div上添加$（this）.parent（）。trigger（「mouseover」）;對於每個div的mouseleave監聽器，但它不會在evey示例中工作（例如，嵌套在其父代中的div，但位於頁面上的父代之外）。

我需要一些新穎的解決方案，它需要與螢火蟲，元素選擇器（可讓您在頁面上滾動元素（使其高亮）的工具非常類似，並單擊以選中它們並觸發它以顯示源代碼元件）。

任何幫助非常感謝。

來源

2011-02-14 gunwin

這就是mouseenter和mouseleave是如何工作的。但是你誤導了，mouseenter是而不是在父元素上觸發。如果將鼠標懸停在後代上，則不會觸發mouseleave。所以這並不是說邊界再次被添加，而是它永遠不會被刪除。

冒泡添加事件處理程序mouseover和mouseout，防止事件：

$("div").mouseover(function(e) { 
    e.stopPropagation(); 
    $(this).css("outline", "solid 3px red");  
}); 

$("div").mouseout(function(e) { 
    e.stopPropagation(); 
    $(this).css("outline", "none");  
});

http://jsbin.com/elofe3/5/edit

來源

2011-02-14 11:19:10

Jquery Mouseenter觸發父元素

回答

相關問題