OnClick event does not fire if you move the mouse

Question

I have a simple button:

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

I also tried:

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

In both cases, it does not register a click if the mouse has moved a certain number of pixels between mousedown and mouseup. This can make users believe that they sent information when they did not.

This happens in Chrome. Not tested by other browsers.

I want the event to fire regardless of where the button that you press and release is located.

Edit: The same thing happens in Firefox, but visually looks like I'm dragging a link. Thus, it at least makes sense for a user whom he does not represent, but in Chrome there is no such visual indicator of what is happening.

Answer 1

The solution was to make preventDefault () onmousedown.

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

Answer 2

A click is defined as "holding the mouse button and then releasing the mouse button." This is a combination of a mouse event and a mouse executed on the same element. If the user moves away from the element, they no longer click, just mousedown (as well as the mouse, and then the mouse on another element).

This is standard, intuitive behavior. Users do not expect their click “matter” if they do not release the mouse without moving.

If for your application this is really important than ANY click result in this view for you, then do not go with onclick, go with onmousedown.

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

EDIT: Your problem is not clear. Perhaps this syntax I'm used to working for will work for you:

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

Answer 3

Demo script

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

Answer 4

I came across the same problem, but in a different context. I created custom buttons using divs with onclick = "..." and placing child divs in them for the text and button icon. When the cursor moves even one pixel over the child div between mousedown and mouseup, the parent div generated a mouseout event, which prevented the click event from firing. I could not find a way to disable the mouseout event, but found a simple CSS solution to this problem. Just turn off event pointers for all children:

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