如何防止 onmouseover 像 onmousemove 一样？ [复制]

Question

我已经为我的 html 正文分配了一个 onmouseover 事件。但是，我只希望它在鼠标进入身体时触发一次。

相反，每当我在身体中移动鼠标时，它就会反复触发，即使鼠标从未离开身体。

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

谢谢

Answer 1

您需要使用事件mouseenter 而不是mouseover，当您从一个元素移动到另一个元素时会触发该事件。

当指针设备（通常是鼠标）时触发 mouseenter 事件 移动到附加了侦听器的元素上。

类似于mouseover，不同之处在于它不会冒泡， 当指针从其后代之一移动时不发送 物理空间到它自己的物理空间。

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>