CODEWITHSUNDEEP
javascripthtml
OMGKurtNilsen
OMGKurtNilsen

Reputation: 5098

onClick event doesn't fire if you move mouse

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.

Upvotes: 9

Views: 5671

Answers (4)

Idont Likeregs
Idont Likeregs

Reputation: 1

I stumbled upon the same problem but in another context. I created custom buttons using divs with onclick="..." and placing child divs into them for the button text and icon. When moving the cursor even one pixel over a child div between mousedown and mouseup, the parent div generated a mouseout event which prevented the click event to be fired. I could not find a way to disable the mouseout event, but found a simple CSS-solution to this problem. Just disable pointer-events for all children:

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

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206565

Demo fiddle

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

Upvotes: 1

OMGKurtNilsen
OMGKurtNilsen

Reputation: 5098

Solution was to do a preventDefault() on onmousedown.

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

Upvotes: 1

Jeremy
Jeremy

Reputation: 5433

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()">

Upvotes: 4

Related Questions