Receiving an (unwanted) mousemove event when clicking on an image

Question

I have a html page, on this page there are some images, when the user clicks on one of these images, a different image replaces it.

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

The ChangePic() function:

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

I also have a label on the page which dispalys the current action, e.g. Move/Right Click/Left Click/ Double Click.

In my onload of the html page, i have:

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

Show action simply changes the label. The ShowKeysDown checks which button has been clicked, then calls ShowAction. (The strings in this call are for multi-language support)

Problem I am having is that when a user clicks on the image with a single left mouse click, the image correctly changes, the label is chaged to 'Left Click' for a fraction of a second, then it changes to 'Move' even though no moving has taken place. I thought that it might be that a single click on an image is regarded as the start of a drag and drop procedure but I am not sure.

Edit: When a user does not click on an image, and just in some random whitespace, the label is correctly displayed as 'Left Click' until they move the cursor, then it changes to 'Move'. This is the behavour I would like when clicking on the images.

Thanks for your time.

Note: this only needs to work in IE as it is part of a HTMLDialog in mfc.

Answer 1

Correct me if I'm wrong... but you're using the onmousemove event.. Isn't the behavior you're experiencing absolutely normal?

Answer 2

It is almost impossible to click an object without getting the mousemove event... you need to filter it some way - like- if the move is too small ignore it...

Answer 3

I presume that the following event happens by user interaction :

1. user moves mouse over the image - onmousemove - displays 'Move' on the label
2. user clicks on image (left button click) - onmousedown - diaplsya 'Left Click' on the label
3. user moves mouse out of the image - onmousemove - displays 'Move' on the label

The onmousemove will fire even user moves the mouse just a pixel on the image.

So the solution for your problem would be :

1. Have a global flag
2. Set it in the event handler of onmousedown
3. Check that flag in event handler of onmousemove, if it is not set then display 'Move' on the label and if it is set then do not do anything
4. Have an event hanlder of onmouseout, reset the flag in this event handler, so again whenever onmousemove fires, it will check the flag and since it has not been set by click event, onmousemove will display 'Move' on the label.

Hope this is what you wanted as behaviour !!!