onClick event doesn't fire if you move mouse

Question

I have a simple button like this:

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

I also tried with:

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

In both cases, it doesn't register the click if the mouse has moved a certain amount of pixels between mousedown and mouseup. This can lead users to believe they have submitted the info when they didn't

This is happening in Chrome. Haven't tested other browsers.

I want the event to fire regardless of where in the button you click and release.

Edit: The same thing is happening in Firefox, but visually it looks like I'm dragging the link. This way it at least makes sense to the user that it doesn't submit, but in Chrome there are no such visual indicator of what is happening.

Answer 1

A click is defined as "holding down the mouse button, and then letting go of the mouse button." It is a combination of a mouse down and mouse up event executed on the same element. If the user moves away from the element, they are no longer executing a click, simply a mousedown (and also a mouseout, and then a mouseup on a different element).

This is standard, intuitive behavior. Users don't expect their click to "matter" unless they let go of the mouse without moving.

If for your application it is really important than ANY click result in this submit happening for you, then don't go with an onclick, go with onmousedown.

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

EDIT: Misunderstood your problem. Perhaps this syntax that I am used to will work for you will work for you:

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

Answer 2

Solution was to do a preventDefault() on onmousedown.

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