javascript - 单击图像时接收(不需要的)mousemove 事件

Question

我有一个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 的一部分。

Answer 1

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

1. 用户将鼠标移到图像上 - onmousemove - 在标签上显示“移动”
2. 用户点击图像(左键点击)- onmousedown - diaplsya 在标签上“左键点击”
3. 用户将鼠标移出图像 - onmousemove - 在标签上显示“移动”

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

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

1. 拥有全局旗帜
2. 在 onmousedown 的事件处理程序中设置
3. 检查 onmousemove 事件处理程序中的标志，如果未设置，则在标签上显示“移动”，如果设置，则不执行任何操作
4. 有一个 onmouseout 事件处理程序，在此事件处理程序中重置标志，因此每当 onmousemove 触发时，它都会检查该标志，并且由于尚未通过单击事件设置该标志，因此 onmousemove 将在标签上显示“移动”。

希望这是您想要的行为!!!