2013-12-19 29 views
0

當我從今天早些時候(if interested, find it here)找到我的問題的解決方案時遇到此問題。當鼠標從孩子進入父母時觸發父級鼠標

我的div結構簡單:

<div id="outer"> 
    <div id="inner"> 
     <div id="content"></div> 
     <div id="handle">HOVER HERE</div> 
    </div> 
</div> 

有註冊outer mouseOut事件:(你可以看到整個工作示例here

$('#outer').on('mouseout', function(event) { 
    if (!(event.relatedTarget.id == "outer") && 
     !$(event.relatedTarget).isChildOf("outer")) { 
     mouseIsOverMenu = false; 
     menu_rollin(); 
    } 
}); 

這是具有slideDown/slideUp效果的菜單的簡單版本。

現在,這裏是我的問題:

我完全明白,在進入一個子元素的鼠標移開火(這是爲isChildOf檢查的原因)。我不明白的是,當我將鼠標從content移動到outerinner僅僅是實際內容的中心,而content是滑動部分並且具有與inner相同的寬度)時,該事件被激發。)這就是爲什麼我添加了檢查relatedTarget是否是元素本身。

對於我的理解,不應該有任何鼠標事件對兒童(ren)。然而,在老式的'警報調試'期間,事實證明,如果鼠標從content回到outer,並且檢查本身(它是relatedTarget)失敗,那麼事件似乎會觸發。

我讀過關於冒泡和再次捕捉的內容,但我這樣理解,只有當一個特定事件的多個事件處理程序存在時它纔是相關的。

我會感謝任何解釋或資源,這有助於理解這個原因。

回答

1

由於事件冒泡,你得到了這個問題。請參見your fiddle用彩色邊框稍作修改。

當您將鼠標移出content時,會觸發mouseout事件(用於離開content)。 content沒有照顧它,所以它泡到他的父母,這是inner等。 mouseout事件僅由外部處理程序處理。

另請參見jquery .mouseout()此事件類型由於事件冒泡可能導致許多頭痛。例如,在這個例子中,當鼠標指針移出Inner元素時,一個mouseout事件將被髮送到該元素,然後涓涓細流到Outer。這可以在不合時宜的時間觸發綁定的鼠標移出處理程序。請參閱.mouseleave()的討論以獲得有用的替代方法。

+0

非常感謝您的回答!如果我說得對,那麼事件(我認爲這是相同的)總是被觸發,但是如果沒有處理程序存在,那麼它們只是不被捕獲? (通過元素本身,它可能通過冒泡被捕獲。) – Dennis

+0

類似的東西。我不知道事件處理是如何完全在jQuery中完成的。如果您有可能嘗試從Nicholas Zakas獲得一本書_Professional JavaScript for Web Developers_,其中他解釋了事件和不同事件流(事件捕獲和事件冒泡)。很可能也有一些關於它的好文章。 –

+0

再次感謝。我認爲你的答案已經澄清了「問題」來自何處。我會盡力拿到這本書,聽起來很有趣。 – Dennis

相關問題