javascript - 为什么在按住鼠标按钮的情况下输入元素会干扰进一步的鼠标事件？

Question

在我的网站上，你可以在底部看到一排卡片。如果您将鼠标悬停在它们上方，它将显示该卡片的更大版本。较大的版本是可拖动的。

有一个奇怪的边缘情况错误，如果您在输入时按住鼠标按钮进入卡片行，然后释放，然后尝试单击并拖动 - 拖动将不起作用。

我已经设置了仔细的断点并观察了——所有的侦听器都正常触发，除了跟踪光标以进行拖动的 onMouseMove 侦听器在您从开始拖动时的位置移动大约 2 个像素后停止触发。如果您只是将光标来回移动 1-2 个像素，它就可以工作。但是，一旦您移动了更多，onMouseMove 事件就会完全停止对该元素的触发。当您释放鼠标时，它会再次开始射击。就好像用鼠标向下输入已经反转了事件，但它在起点的 2px 范围内正常工作。

对于这种行为，我想不出任何解释。如果您从开始拖动的位置移动超过 2 个像素，为什么按住鼠标按钮进入会导致 onMouseMove 停止触发？

此外，当尝试拖动失败时，这个不熟悉的图像会出现在光标旁边，直到您释放按钮：

任何人都可以识别这个图标以便我查找它吗？

标签： javascriptreactjsmouseeventaddeventlistenerevent-listener

Answer 1

根据OP 的评论，解决方案是调用event.preventDefault()所有（与拖动相关的？）事件侦听器。