Question

我最近在javascript中发现了mouseout事件的奇怪行为。请看我的小提琴：http://jsfiddle.net/Uf3xQ/25/

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

现在当我悬停，然后点击并点击事件显示一个位于按钮上方的div时，mouseout事件也将被触发。

但是当使用setTimeout进行短暂延迟后显示div时，鼠标输出事件将被触发，直到我移动鼠标。

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

更新我把这个bug提交给了铬，他们证实了这一点。见这里：http://code.google.com/p/chromium/issues/detail?id=159389

该错误也发生在Opera，Safari（WebKit的共同点）和IE

中

Answer 1

尝试在叠加层上使用委托来鼓舞事件。
的修改今天小提琴很慢，我最初发布的小提琴没有我使用过的代码片段。

这个DOES工作在选择jQuery版本（1.8.2）链接到jsBIN fork：http://jsbin.com/ugeniq/3/edit

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

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

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

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

Answer 3

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

Answer 4

解决此问题的最佳方法是将按钮和叠加层包裹起来，并将鼠标悬停和鼠标移动更改为此包装。

// 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");

}）;

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

5 个答案: