I need to fire two events. One when the cursor enters the document and when he leaves the document. Right now i have a problem that the events also fire when i use the cursor inside the document, you can see this in the console of my fiddle.
How is it possible to just fire the events when i enter and leave the document?
let cursor = document.getElementById('cursor');
function onMousEnter() {
cursor.classList.add('is-active');
console.log("Enter!");
}
function onMouseLeave() {
cursor.classList.remove('is-active');
console.log("Out!");
}
document.addEventListener('mouseover', onMousEnter);;
document.addEventListener('mouseout', onMouseLeave);
const onMouseMove = (e) => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
mouseenter instead of mouseover.mouseleave instead of mouseout.The difference between those is that mouseenter and mouseleave don't bubble. So whenever you move your cursor over or out of a child, those won't trigger the event.