Recibir un evento de mousemove (no deseado) al hacer clic en una imagen

Question

Tengo una página html, en esta página hay algunas imágenes, cuando el usuario hace clic en una de estas imágenes, una imagen diferente la reemplaza.

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

La función ChangePic ():

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

También tengo una etiqueta en la página que muestra la acción actual, p. Mover / clic derecho / clic izquierdo / doble clic.

En mi carga de la página html, tengo:

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

Mostrar acción simplemente cambia la etiqueta. ShowKeysDown comprueba en qué botón se ha hecho clic y luego llama a ShowAction. (Las cadenas en esta llamada son para soporte multilingüe)

El problema que tengo es que cuando un usuario hace clic en la imagen con un solo clic izquierdo del mouse, la imagen cambia correctamente, la etiqueta se cambia a 'Clic izquierdo' por una fracción de segundo, luego cambia a 'Mover 'a pesar de que no se ha producido ningún movimiento. Pensé que podría ser que un solo clic en una imagen se considera como el inicio de un procedimiento de arrastrar y soltar, pero no estoy seguro.

Editar: cuando un usuario no hace clic en una imagen, y solo en un espacio en blanco aleatorio, la etiqueta se muestra correctamente como 'Clic izquierdo' hasta que mueva el cursor, luego cambia a 'Mover'. Este es el comportamiento que me gustaría al hacer clic en las imágenes.

Gracias por su tiempo.

Nota: esto solo necesita funcionar en IE ya que es parte de un HTMLDialog en mfc.

Answer 1

Supongo que el siguiente evento ocurre por interacción del usuario:

1. el usuario mueve el mouse sobre la imagen - onmousemove - muestra 'Move' en la etiqueta
2. el usuario hace clic en la imagen (clic con el botón izquierdo) - onmousedown - diaplsya 'Left Click' en la etiqueta
3. el usuario mueve el mouse fuera de la imagen - onmousemove - muestra 'Move' en la etiqueta

El onmousemove disparará incluso si el usuario mueve el mouse solo un píxel en la imagen.

Entonces, la solución para su problema sería:

1. Tener una bandera global
2. Configúralo en el controlador de eventos de onmousedown
3. Verifique ese indicador en el controlador de eventos de onmousemove, si no está configurado, muestre 'Mover' en la etiqueta y, si está configurado, no haga nada
4. Tenga un gestor de eventos de onmouseout, restablezca la bandera en este controlador de eventos, por lo que nuevamente, cuando onmousemove se active, verificará la bandera y, dado que no se ha establecido mediante un evento de clic, onmousemove mostrará 'Move' en la etiqueta.

¡Espero que esto sea lo que querías como comportamiento!

Answer 2

Corrígeme si me equivoco ... pero estás usando el evento onmousemove ... ¿No es el comportamiento que estás experimentando absolutamente normal?

Answer 3

Es casi imposible hacer clic en un objeto sin obtener el evento mousemove ... necesita filtrarlo de alguna manera, como si el movimiento es demasiado pequeño, ignórelo ...