Receber uma (indesejada) evento mousemove ao clicar em uma imagem

Question

Eu tenho uma página html, nesta página, há algumas imagens, quando o usuário clica em uma dessas imagens, uma imagem diferente substitui-lo.

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

O ChangePic () função:

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

Eu também tenho uma etiqueta na página que dispalys a acção actual, por exemplo, Move / Right Click / Esquerda Clique / Duplo Clique.

Na minha onload da página html, eu tenho:

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

Mostrar a ação simplesmente muda o rótulo. As verificações ShowKeysDown qual botão foi clicado, em seguida, chama ShowAction. (As cordas neste chamada são para suporte multi-idioma)

O problema que estou tendo é que quando um usuário clica na imagem com um único clique esquerdo do mouse, a imagem muda corretamente, o rótulo é chaged para 'Left Click' para uma fração de segundo, então ele muda para 'Move 'lugar mesmo que nenhum movimento tomou. Eu pensei que poderia ser que um único clique em uma imagem é considerado como o início de um procedimento de arrastar e soltar, mas não tenho certeza.

Edit: Quando um usuário não clicar em uma imagem, e apenas em alguns espaços em branco aleatório, o rótulo é exibido corretamente como 'Left Click' até que move o cursor, em seguida, ele muda para 'Move'. Esta é a behavour gostaria ao clicar nas imagens.

Obrigado pelo seu tempo.

Nota: Isto só precisa trabalhar no IE, uma vez que faz parte de um HTMLDialog no MFC.

Answer 1

Eu presumo que o seguinte evento acontece pela interação do usuário:

1. usuário se move mouse sobre a imagem - onmousemove - exibe 'Move' na etiqueta
2. usuário clica em imagem (clique o botão esquerdo) - onmousedown - diaplsya 'Left Clique' no rótulo
3. usuário se move mouse para fora da imagem - onmousemove - exibe 'Move' na etiqueta

O onmousemove dispara, mesmo usuário move o mouse apenas um pixel na imagem.

Portanto, a solução para o seu problema seria:

1. Tenha um sinalizador global
2. Set-lo no manipulador de eventos de onmousedown
3. Verifique se bandeira no manipulador de eventos de onmousemove, se ele não estiver definido, em seguida, exibir 'Move' no rótulo e se estiver definido, então não fazer nada
4. Você possui uma hanlder caso de onmouseout, redefinir o sinalizador nesse manipulador de eventos, por isso novamente sempre incêndios onmousemove, ele irá verificar a bandeira e uma vez que não foi definido pelo evento click, onmousemove irá exibir 'Move' no rótulo.

A esperança é isso que você queria como comportamento !!!

Answer 2

me corrija se eu estiver errado ... mas você está usando o evento onmousemove .. Não é o comportamento que você está enfrentando absolutamente normal?

Answer 3

É quase impossível para clicar em um objeto sem obter o evento mousemove ... você precisa filtrá-la de alguma forma - como-se o movimento é muito pequeno ignorá-lo ...