I feel like I'm going insane... So, as per my understanding and seemingly the universal consensus of the internet, mouseout fires on the cursor leaving an element or any of it's children, whilst mouseleave only fires on the cursor leaving the element the event is attached to. So I take something as barebones as this:
<html>
<body>
<div id='test'>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script>
const div = document.getElementById('test');
div.addEventListener('mouseleave', (e) => console.log('out'), true);
</script>
</body>
</html>
... and the mouseleave event is definitely still firing when the mouse leaves any of the descendents of that div. I feel like I must be doing something so obviously wrong, but... what?
Try to remove last argument from your
addEventListener- it is calleduseCaptureand by default itsfalse. If you passtrue, when event will be fired on capturing phase, which will cause firingmouseleaveon every child element. Read more aboutuseCaptureparameter - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListenermouseleaveevent doesn't bubbles because of that it will not trigger parent event when leaving child element. But when you passuseCapture- you force event to be fired on capturing phase. Event phases on MDN - https://developer.mozilla.org/ru/docs/Web/API/Event/eventPhase