文档鼠标悬停和鼠标退出多次触发 - 应该只触发一次

Question

我需要激发两个事件。一个是当光标进入文档时，另一个是离开文档时。现在我有一个问题，当我在文档中使用光标时，事件也会触发，你可以在我的fiddle控制台中看到这一点。

当我进入和离开文档时，怎么可能只触发事件？

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

https://jsfiddle.net/k81zbdmj/1/

Answer 1

1. 使用mouseenter而不是mouseover
2. 使用mouseleave而不是mouseout

它们之间的区别在于mouseenter和mouseleave没有气泡。因此，每当您将光标移到子对象上或移出子对象时，这些都不会触发事件。