0

Consider the following code: 

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

When clicking multiple times really fast, even when the mouse cursor don't leave the content area it triggers a mouseleave event, logging 'leave'.

GIF showing the events triggering

caulitomaz
  • 2,141
  • 14
  • 20
NiLinli
  • 11
  • 1

1 Answers1

0

It's hard to replicate in JSFiddle--you have to click pretty fast and repetitively.

It seems to me that sometimes this fast clicking causes the window to lose the focus of the mouse, and thus the cursor has left the element effectively. You don't have much control over this behavior if that's the case.

<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>
jviall
  • 19
  • 3