Mouseleave triggered by click

Question

I have an absolutely-positioned div, and I'm trying to keep track of when the mouse moves over it, and when the mouse leaves. Unfortunately clicking on the text in the box occasionally triggers the mouseleave event.

DEMO: js fiddle

How can I prevent this?

JS

let tooltip = document.createElement('div'); tooltip.innerHTML = 'HELLO WORLD'; tooltip.setAttribute('class', 'tooltip'); tooltip.style.display = 'none';  tooltip.onclick = evt => {     console.log('click')     evt.stopPropagation(); } tooltip.ondblclick = evt => {     console.log('double click')     evt.stopPropagation(); }  tooltip.onmouseenter = () => {     console.log('tooltip mouse OVER'); }  tooltip.onmouseleave = () => {     console.log('tooltip mouse OUT') }  tooltip.style.left = '290px'; tooltip.style.top = '50px'; tooltip.style.display = 'block'; document.body.appendChild(tooltip); 

HTML

<div style="width: 300px; height: 300px; background-color: lightblue">  </div> 

CSS

.tooltip {     position: absolute;     /*display: none;*/     left: 100;     top: 100;     min-width: 80px;     height: auto;     background: none repeat scroll 0 0 #ffffff;     border: 1px solid #6F257F;     padding: 14px;     text-align: center; } 

Answer 1

This seems to be a bug (I could reproduce it in Chrome with clicks that have the mouse down and mouse up happening rapidly after each other).

I would suggest to work around this issue by checking whether the mouse is still over the element at the moment the event is fired:

tooltip.onmouseleave = (e) => {     if (tooltip === document.elementFromPoint(e.clientX, e.clientY)) {         console.log('false positive');         return;     }     console.log('tooltip mouse OUT') } 

The downside is that when the browser window loses focus, that is also considered a false positive. If that is an issue for you, then check this answer.

Answer 2

I had previously looked at the answers and comments here, but recently found a way to check if the mouseleave event was triggered erroneously

I added a check in my mouseleave handler:

private handleMouseLeave(event: MouseEvent) {     if(event.relatedTarget || event.toElement){         // do whatever     }     // otherwise ignore } 

From my testing on Chrome v64, both of these values will be null whenever fast clicking causes the mouseleave event to be triggered. The relatedTarget is for older browser compatibility

Note: both of these values will also be null if the mouse leaves the target element and enteres the Browser (e.g. the tabs, menus etc), or leaves the browser window. For my purposes that was not a problem, as it is a sliding menu I am working with, and leaving the Browser window should not close the menu in my particular case.

Note: latest Firefox release (Feb 2018) seems to trigger mouseleave on every click of my menu! Will have to look into it