當鼠標從孩子進入父母時觸發父級鼠標

當我從今天早些時候（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移動到outer（inner僅僅是實際內容的中心，而content是滑動部分並且具有與inner相同的寬度）時，該事件被激發。）這就是爲什麼我添加了檢查relatedTarget是否是元素本身。

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

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

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

來源

2013-12-19 Dennis

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

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

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

來源

2013-12-19 21:50:04

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

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

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

這聽起來像是一個問題event bubbling。類似event.stopPropagation()可能會有所幫助。

來源

2013-12-19 20:51:31 devnill

當鼠標從孩子進入父母時觸發父級鼠標

回答

相關問題