如何防止onmouseover像onmousemove一样？

Question

我已经为我的html主体分配了一个onmouseover事件.但是,当鼠标进入身体时,我只希望它发射一次.

相反,每当我将鼠标移动到身体中时,它就会反复射击,即使鼠标从未离开过身体.

有没有办法防止这些失火？

谢谢

Answer 1

您需要使用事件mouseenter而不是鼠标悬停,当您从元素移动到元素时将触发该事件.

当指针设备(通常是鼠标)移动到连接了侦听器的元素上时,会触发mouseenter事件.

与鼠标悬停类似,它的不同之处在于它不会冒泡,并且当指针从其后代的物理空间之一移动到其自己的物理空间时,它不会被发送.

document.body.addEventListener('mouseenter', function() {
  snippet.log('mouse entered')
});
document.body.addEventListener('mouseover', function() {
  snippet.log('mouse over')
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<div>Soem content <span>within span</span> <button>Button</button></div>