當鼠標懸停的元素被其他元素覆蓋時，mouseout未被觸發

Question

我最近發現了一個奇怪的行爲，在javascript中使用mouseout事件。 請看我的小提琴：http://jsfiddle.net/Uf3xQ/25/

當我將鼠標懸停在按鈕上時，會觸發mouseenter事件。當我離開按鈕時，mouseout事件被觸發。到現在爲止還挺好。

現在，當我懸停，然後單擊並單擊事件顯示放置在按鈕上的div時，mouseout事件也將被觸發。

但是，如果在使用setTimeout的短暫延遲後顯示div，則在我移動鼠標之前，不會觸發mouseout事件。

你能向我解釋這種行爲嗎？

更新： 我將錯誤提交給鉻並且他們證實了它。在這裏看到：http://code.google.com/p/chromium/issues/detail?id=159389

的錯誤也出現在Opera，Safari瀏覽器（在普通的WebKit）和IE

Answer 1

我瀏覽的WebKit的Bugzilla和https://bugs.webkit.org/show_bug.cgi?id=4117似乎是你的錯誤，你應該添加一個新評論到bug與鏈接你的測試用例，因爲錯誤中鏈接的測試用例似乎丟失了（404錯誤）。

Answer 2

這似乎是一個不起眼的瀏覽器錯誤（在Chrome）。 Firefox似乎工作正常。我不確定其他瀏覽器。

我取代一切與本地的js，這樣可以很清楚：

http://jsfiddle.net/qLCY3/4/

Answer 3

嘗試使用疊加層上的委託將事件向上冒泡。
編輯 小提琴今天很慢，我最初發布的小提琴沒有剪掉我用過的代碼。

這是否在小提琴作品使用jQuery版本（1.8.2）中選擇 鏈接jsBIN叉：http://jsbin.com/ugeniq/3/edit

EDIT 2 我才意識到鼠標/過/出不股利沒工作。我已經更新了代碼，所以現在可以使用和不使用div覆蓋。

var fail = true; 

var button = document.getElementById("button"); 
var overlay = document.getElementById("overlay"); 
var log = document.getElementById("log"); 


button.addEventListener('click', function() { 
    if (fail) { 

     // mouseout won't be fired until you move the mouse 
     window.setTimeout(function() { 
      overlay.style.display = 'block'; 
     }, 0); 

    } else { 

     // mouseout event is fired instantly 
     overlay.style.display = 'block'; 

    } 


    log.innerHTML += 'over' + "<br>"; 

}, false); 

button.addEventListener('mouseover', function() { 
    log.innerHTML += 'over' + "<br>"; 
}, false); 

button.addEventListener('mouseout', function() { 
    log.innerHTML += 'out' + "<br>"; 
}, false); 

$(overlay).delegate(button, 'mouseover', function() { 
     log.innerHTML += 'over' + "<br>"; 
}); 

$(overlay).delegate(button, 'mouseout', function() { 
     log.innerHTML += 'out' + "<br>"; 
    }); 

Answer 4

解決此問題的最佳方法是將按鈕和疊加層包裝起來，並將mouseover和mouseleave更改爲此包裝。

// HTML

<div class="helper"> 
    <div class="overlay"></div> 
    <button class="button">Foo</button> 
</div> 

// JS

var fail = true; 
$$('.helper').addEvent('mouseover', function() { 
    console.log('over'); 
}); 

$$('.helper').addEvent('mouseleave', function() { 
    console.log('out'); 
}); 

$$('.button').addEvent('click', function() { 
    if(fail) { 

     // mouseout won't be fired until you move the mouse 
     window.setTimeout(function() { 
      $$('.overlay').setStyle('display','block'); 
     }, 0); 

    } else { 

     // mouseout event is fired instantly 
     $$('.overlay').setStyle('display','block'); 

    } 
}); 

Answer 5

只是鼠標移出事件的疊加，使其淡出或任何你想要它做的。我在你的小提琴中發出警報試用它。

$$('.button').addEvent('mouseover', function() { 
console.log('over'); 

}）;

$$('.overlay').addEvent('mouseout', function() { 
    alert("ee"); 

}）;