OnClick-Ereignis wird nicht ausgelöst, wenn Sie die Maus bewegen

Question

Ich habe eine einfache Taste wie folgt aus:

<a class="button" href="javascript:void(0);" onclick="submitActivity();">Add</a> 

ich auch versucht, mit:

<a class="button" href="javascript:submitActivity();">Add</a> 

In beiden Fällen ist es nicht registrieren die Klicken Sie, wenn die Maus eine bestimmte Anzahl von Pixeln zwischen Mouse-Down und Mouse-Up bewegt hat. Dies kann dazu führen, dass Benutzer glauben, dass sie die Informationen gesendet haben, wenn sie es nicht taten

Dies geschieht in Chrome. Habe andere Browser nicht getestet.

Ich möchte das Ereignis ausgelöst werden, unabhängig davon, wo in der Schaltfläche Sie klicken und loslassen.

Edit: Das gleiche passiert in Firefox, aber visuell sieht es so aus, als würde ich den Link ziehen. Auf diese Weise macht es für den Benutzer zumindest Sinn, dass er nicht einreicht, aber in Chrome gibt es keinen visuellen Indikator dafür, was passiert.

Answer 1

Lösung wurde eine prevent() auf onmousedown zu tun.

$(".button").mousedown(function(event){ 
    event.preventDefault(); 
    return false; 
}); 

Answer 2

Ein Klick ist definiert als "Halten Sie die Maustaste gedrückt und lassen Sie dann die Maustaste los." Es ist eine Kombination aus einem Mouse-Down- und Mouse-Up-Ereignis, das auf demselben Element ausgeführt wird. Wenn der Benutzer sich von dem Element wegbewegt, führt er keinen Klick mehr aus, sondern nur einen Mausklick (und auch einen Mouse-Out und dann einen Mausklick auf ein anderes Element).

Dies ist ein standardmäßiges, intuitives Verhalten. Benutzer erwarten nicht, dass ihr Klick "wichtig" ist, wenn sie nicht die Maus loslassen, ohne sich zu bewegen.

Wenn es für Ihre Anwendung ist es wirklich wichtig, als irgendein Klick Ergebnis in diesem absenden passiert für Sie, dann gehen Sie nicht mit einem onclick, gehen Sie mit onmousedown.

<a class="button" href="javascript:void(0);" onmousedown="submitActivity();">Add</a> 

EDIT: Missverstanden Sie Ihr Problem. Vielleicht ist diese Syntax, die ich bin es gewohnt, für Sie arbeiten wird für Sie arbeiten:

<INPUT type="button" value="Add" name="add_button" onClick="submitActivity()"> 

Answer 3

Demo fiddle

<a class="button" href="javascript:void(0);" onMouseDown="submitActivity();">Add</a> 

Answer 4

stieß ich auf das gleiche Problem, aber in einem anderen Kontext. Ich erstellte benutzerdefinierte Tasten mit divs mit onclick = "..." und Platzierung Kind divs in sie für die Schaltfläche Text und Symbol. Wenn Sie den Mauszeiger zwischen Mousedown und MouseUp um ein Pixel über ein Kind-Div bewegen, erzeugte das Eltern-Div ein MouseOut-Ereignis, das das Klick-Ereignis verhinderte. Ich konnte keine Möglichkeit finden, das mouseout-Ereignis zu deaktivieren, sondern eine einfache CSS-Lösung für dieses Problem gefunden. Deaktivieren Sie einfach Zeiger-Ereignisse für alle untergeordneten Elemente:

.buttondiv * { 
    pointer-events: none; /* prevent click problems in buttons containing child divs */ 
}