Question

考虑以下代码：

<style>
    #content {
        display: block;
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

<div id="content">
    dodododododo.....
</div>

<script>
    var content = document.getElementById('content');

    content.addEventListener('mouseenter', function (e) {
        console.log('enter');
    });

    content.addEventListener('mouseleave', function (e) {
        console.log('leave');
    });
</script>

如果快速点击多次，即使鼠标光标没有离开内容区域也会触发mouseleave事件，记录“离开”。

GIF showing the events triggering

Answer 1

很难在JSFiddle中复制 - 你必须非常快速地重复点击。

在我看来，有时这种快速点击会导致窗口失去鼠标的焦点，因此光标有效地离开了元素。如果是这种情况，你无法控制这种行为。

<style>
    #content {
        display: block;
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

<div id="content">
    dodododododo.....
</div>

<script>
var content = document.getElementById('content');

content.addEventListener('mouseenter', function (e) {
    console.log('enter');
});

content.addEventListener('mouseleave', function (e) {
    console.log('leave');
});
</script>

为什么多次快速单击会触发mouseleave事件？

1 个答案: