5

mouseout我最近在 javascript 中发现了一个奇怪的事件行为。请看我的小提琴：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 中

4

5 回答 5

4

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

这确实适用于 jQuery 版本（1.8.2）选择的 jsBIN fork 链接：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>";
    });
于 2012-11-08T01:29:59.617 回答
2

它似乎是一个不起眼的浏览器错误（在 中Chrome）。Firefox似乎工作正常。我不确定其他浏览器。

我用原生 js 替换了所有内容，以使其更清晰：

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

于 2012-11-05T09:22:02.027 回答
2

我浏览了 WebKit bugzilla 并且https://bugs.webkit.org/show_bug.cgi?id=4117似乎是您的错误，您应该在错误中添加一条新评论，并带有指向您的测试用例的链接，因为测试用例在错误似乎丢失了（404 错误）。

于 2012-11-05T09:39:59.070 回答
1

解决这个问题的最好办法是把button和overlay包装起来，把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');

    }
});
于 2012-11-09T13:45:28.420 回答
1

只需将鼠标移出覆盖层并使其淡出或您想要它做的任何事情。我让它在你的小提琴中保持警惕试试看。 

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

});

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

});

于 2012-11-11T01:22:40.707 回答