javascript - onmousemove javascript 的奇怪之处

Question

大家好:)如果我在示例中使用鼠标指针传递 div，函数在控制台中打印两次，这意味着 onmousemove 事件被触发两次。我还打印了鼠标指针的坐标以及您如何在下图，我也没有垂直移动，只是水平移动。考虑到 div 是 1 像素宽度，onmousemove 事件怎么可能被触发？考虑到 div 是 1 像素宽度，onmousemove 事件怎么可能被触发两次？

  <div id="div1">

</div>

#div1{
  height:200px;
  width:1px;
  background:red;

}


document.getElementById("div1").onmousemove= function(){

              console.log("in mousemove function");
              console.log(event.clientX);
              console.log(event.clientY);

             };

Answer 1

您绑定(bind) onmousemove ，每次鼠标移到元素上时都会调用它。当您将鼠标悬停在 div 上时，您有时会向下移动鼠标以解决对处理程序的额外调用。

如果给div增加更多的宽度，会更清晰。

你真正想要的是 onmouseenter 当你进入 div 时它会被调用一次:

document.getElementById('div1').addEventListener('mouseenter', function() {
  console.log('mouse entered div');
});