當鼠標懸停在元素上時，鼠標事件在Firefox中觸發兩次。導致閃爍。有什麼方法可以改變這種閃爍？

Question

HTML：

<ul class="navigate"> 
<li> 
    <a title="Demo01" href="###">Demo01</a> 
    <ol> 
     <li><a title="Demo01Children01" href="###">Demo01Children01</a></li> 
     <li><a title="Demo01Children02" href="###">Demo01Children01</a></li> 
    </ol> 
</li> 
<li><a title="Demo02" href="###">Demo02</a></li> 
</ul> 

的Javascript：

$("ul.navigate>li").mouseenter(function(){ 
    $(this).children("a").slideDown(); 
    console.log("hover"); 
}).mouseleave(function(){ 
    $(this).children("a").slideUp(); 
    console.log("out"); 
}); 

運行HTML和JS在Firefox中，我看到了輸出 「懸停，出來，懸停」 在Firefox的螢火蟲當鼠標懸停每次。其實這不是我輸出「懸停」的目的。有人可以幫我解決問題嗎？

Answer 1

不改變你的標記，我稍微修改您的JavaScript看起來像這樣：

$("ul.navigate > li").mouseenter(function(){ 
    $(this).find("li").slideDown(); 
    console.log("hover"); 
}).mouseleave(function(){ 
    $(this).find("li").slideUp(); 
    console.log("out"); 
}); 

一個建議，我也同樣適用display: none給孩子菜單

演示：http://jsfiddle.net/C2nVz/1/

注意：該演示還包括list-style-type: none，由埃德建議，其原因多個mouseover和mouseleave事件。

Answer 2

您遇到問題是因爲您正在滑動元素，這會快速再次調用事件！看一看at this jsfiddle，我在那裏評論了滑行線。

我建議你告訴我們你的代碼是如何工作的（是否需要滑動？），然後我們可以找到解決方案。

基本上我改變了你的代碼：

$("ul.navigate>li").mouseenter(function() 
{ 
    //$(this).children("a").slideDown(); 
    console.log("hover"); 
}).mouseleave(function() 
{ 
    //$(this).children("a").slideUp(); 
    console.log("out"); 
}); 

Answer 3

我認爲你得到閃爍的原因是因爲li包括子彈點。 當你從左側進入時，你點擊項目符號點（觸發in），然後空白處（觸發out），然後文本iteself（再次觸發in）。

如果您添加以下CSS來演示：

li{ 
    list-style-type: none; 
} 

你找到的行爲會消失？

另一個說明：在移動（滑動）元素上添加'懸停'行爲可能是一個非常糟糕的主意！

Codepen here來演示。