Javascript 为什么多次快速单击会触发鼠标移动事件？；

考虑以下代码：

#内容{
显示：块；
宽度：200px；
高度：200px；
背景颜色：黄色；
}
多朵多朵。。。。。
var content=document.getElementById（'content'）；
content.addEventListener（'mouseenter'，函数（e）{
console.log（'enter'）；
});
content.addEventListener（'mouseleave'，函数（e）{
console.log（'leave'）；
});

当多次快速单击时，即使鼠标光标没有离开内容区域，也会触发一个

mouseleave

事件，记录“离开”

很难在中复制--您必须快速重复地单击

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

<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>

#内容{
显示：块；
宽度：200px；
高度：200px；
背景颜色：黄色；
}
多朵多朵。。。。。
var content=document.getElementById（'content'）；
content.addEventListener（'mouseenter'，函数（e）{
console.log（'enter'）；
});
content.addEventListener（'mouseleave'，函数（e）{
console.log（'leave'）；
});

可能重复

<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>