与onmousemove javascript的奇怪的事情

Question

嗨大家:)如果我用鼠标的指针传递示例中的div，该函数在控制台中打印两次，这个onmousemove事件的menans被触发了两次。我也打印了鼠标指针的坐标以及你如何在下面的图像中看到，我也不会垂直移动但只是水平移动。如果div是1像素宽度，有可能触发onmousemove事件吗？可能是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代替。