为什么快速点击多次会触发 mouseleave 事件？ [重复]答案

【问题标题】：Why clicking fast multiple times triggers a mouseleave event？ [duplicate]为什么快速点击多次会触发 mouseleave 事件？ [重复]
【发布时间】：2018-11-14 11:30:00
【问题描述】：

考虑以下代码：

<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

【问题讨论】：

可能重复stackoverflow.com/q/45266854/80766

标签： javascript dom

【解决方案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>

【讨论】：