单击图像时收到（不需要的）mousemove 事件答案

【问题标题】：Receiving an (unwanted) mousemove event when clicking on an image单击图像时收到（不需要的）mousemove 事件
【发布时间】：2009-11-30 09:07:39
【问题描述】：

我有一个 html 页面，在这个页面上有一些图片，当用户点击其中一张图片时，另一个图片会替换它。

<img style="cursor:hand" src="../_Img/click_me.png" onclick="ChangePic();">

ChangePic() 函数：

function ChangePic() {
var el = event.srcElement;
el.src = '../_Img/Clicked.png';}

我在页面上还有一个显示当前操作的标签，例如移动/右键单击/左键单击/双击。

在我的 html 页面加载中，我有：

onmousemove="ShowAction('Move');" onmousedown="ShowKeysDown('Left','Middle','Right','click');"

显示动作只是改变标签。 ShowKeysDown 检查哪个按钮已被单击，然后调用 ShowAction。（此调用中的字符串用于多语言支持）

我遇到的问题是，当用户单击鼠标左键单击图像时，图像正确更改，标签在几分之一秒内变为“左键单击”，然后变为“移动” '即使没有发生任何移动。我认为单击图像可能会被视为拖放过程的开始，但我不确定。

编辑：当用户没有点击图像时，只是在一些随机空白处，标签正确显示为“左键单击”，直到他们移动光标，然后它变为“移动”。这是我在点击图片时想要的行为。

感谢您的宝贵时间。

注意：这只需要在 IE 中工作，因为它是 mfc 中 HTMLDialog 的一部分。

【问题讨论】：

【解决方案1】：

我认为用户交互会发生以下事件：

即使用户将鼠标移动到图像上的一个像素，onmousemove 也会触发。

所以你的问题的解决方案是：

有一个全局标志
在onmousedown的事件处理程序中设置
在 onmousemove 的事件处理程序中检查该标志，如果未设置，则在标签上显示“移动”，如果已设置则不执行任何操作
有一个 onmouseout 的事件处理程序，在这个事件处理程序中重置标志，所以当 onmousemove 触发时，它会再次检查标志，因为它没有被点击事件设置，onmousemove 将在标签上显示“移动”。

希望这是你想要的行为！！！

【讨论】：

【解决方案2】：

如果我错了，请纠正我...但是您正在使用 onmousemove 事件..您遇到的行为不是绝对正常吗？

【讨论】：

应该在主要问题中提到这一点，但是当用户不点击图像时，只是在一些随机空白处，标签会正确显示为“左键单击”，直到他们移动光标，然后它变为“移动”。这是我在单击图像时想要的行为。感谢您的关注。
啊，好吧。丹尼提到的一点是你的问题。确实，您几乎无法点击，也无法移动鼠标。

【解决方案3】：

几乎不可能在没有获得 mousemove 事件的情况下单击对象... 您需要以某种方式对其进行过滤-例如-如果移动太小，请忽略它...

【讨论】：