的onmouseout通過文本觸發 - OnMouseLeave在（即只）功能首選

Question

堆棧球迷，

我有一個div，隨着你鼠標關閉它，我希望它隱藏。問題是，當鼠標光標在該div中的文本上移動時，onmouseout會觸發。我看到了onmouseleave函數，這正是我想要的，但它是一個IE瀏覽器觸發事件​​。該修補程序應在IE/FF/Opera/Chrome/Safari中運行。

使用下面的代碼，有沒有辦法解決此問題的簡單方法：

<style> 
    #mydiv{background-color:orange;width:600px;height:200px;} 
</style> 

<div id="mydiv" onmouseout="this.style.display='none'"> 
    <ul> 
    <li>some text</li> 
    <li>more stuff</li> 
    </ul> 
</div> 

我查了一些其他類似的職位，但我沒有看到任何這樣的問題。

爲了便於說明，當您將鼠標放在div中的文本上時，它目前隱藏了div。我希望它只在鼠標離開div時觸發隱藏。

感謝，

亞當

Answer 1

感到很慚愧......哦生活和學習...

preventing mouseout event for child node

該帖子有答案。希望它可以幫助你。

Answer 2

的mouseenter和鼠標離開

僅Microsoft提供的解決方案。它創建了兩個新事件mouseenter和mouseleave。它們幾乎與mouseover和mouseout相同，只是它們不會對事件冒泡作出反應。因此，他們將整個HTML元素註冊爲一個實體塊，並且不會對塊內發生的鼠標懸停和滾動操作做出反應。

因此，使用這些事件也解決了我們的問題：它們只對它們註冊的元素的鼠標懸停/跳出作出反應。

At the moment these events are only supported by Explorer 5.5 on Windows and higher. 
Maybe the other browser vendors will copy these events. 

見參考：http://www.quirksmode.org/js/events_mouse.html

所以，你需要jQuery來使其所有的瀏覽器兼容。

觀看演示用一個jQuery：http://jsfiddle.net/rathoreahsan/R4z3s/

HTML：

<div id="mydiv"> 
    <ul> 
    <li>some text</li> 
    <li>more stuff</li> 
    </ul> 
</div> 

jQuery的

$('#mydiv').mouseleave(function() { 
    $(this).css({"display" : "none"}) 
});