onmousemove javascript的奇怪之处

Question

嗨伙计们:)如果我用鼠标指针传递示例中的 div 函数在控制台中打印两次，这意味着 onmousemove 事件被触发两次。我还打印了鼠标指针的坐标和您如何在下图中看到，我也不会垂直移动，而只会水平移动。考虑到 div 是 1 像素宽度，如何触发 onmousemove 事件？考虑到div 是 1 像素宽？

  <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

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

如果你给div增加更多的宽度会更清楚。

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

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

Answer 2

将console.log 更改为alert，您会注意到该事件仅被触发一次。这个对我有用。我尝试使用与在 DOM 就绪上执行 javascript 相同的代码。

我还将宽度更改为 20 像素，以便确定。

Answer 3

以下是您的示例代码：https://jsfiddle.net/jy8u4y2m/

您会注意到，虽然您的 div 是 1px 宽，但它也是 200px 高。这意味着如果你用鼠标输入 div，onmousemove 将被触发。但是，如果您在退出 div 边界之前向下移动鼠标，则该事件将继续触发。我的假设是您接到多个电话是因为您没有完全水平移动鼠标。

正如@andlrc 所发布的，如果你想要一个触发器，你应该改用mouseenter。