javascript - 当悬停的元素被另一个元素覆盖时，不会触发 mouseout

Question

我最近发现 javascript 中的 mouseout 事件有一个奇怪的行为。 请看我的 fiddle :http://jsfiddle.net/Uf3xQ/25/

当我将鼠标悬停在按钮上时，将触发 mouseenter 事件。当我离开按钮时，将触发 mouseout 事件。到目前为止一切顺利。

现在，当我将鼠标悬停，然后单击并且单击事件显示一个放置在按钮上方的 div 时，mouseout 事件也将被触发。

但是当使用 setTimeout 短暂延迟后显示 div 时，mouseout 事件不会被触发，直到我移动鼠标。

你能给我解释一下这种行为吗？

更新: 我将错误提交给 Chromium，他们确认了这一点。看这里:http://code.google.com/p/chromium/issues/detail?id=159389

Opera、Safari(常见的WebKit)和IE也有这个bug

Answer 1

尝试在叠加层上使用委托(delegate)来使事件冒泡。
编辑 今天 fiddle 很慢，我最初发布的 fiddle 没有我使用的代码片段。

这确实适用于选择 jQuery 版本 (1.8.2) 链接到 jsBIN 分支:http://jsbin.com/ugeniq/3/edit

编辑 2 我刚刚意识到没有 div 的鼠标/悬停/悬停不起作用。我已经更新了代码，所以现在它可以使用和不使用 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>";
    });