JQuery Mouse Events

Question

So my question is about how jQuery mouse events are handled. Correct me if I'm wrong but the following events happen in this order:

.mouseDown
.click
.mouseUp

My question is does .click wait for .mouseDown to finish running before its called by default? If not, is there something like .promise for animations that forces .click to wait?

Edit #1 Lots of these responses are touching on my question a bit, but what i would like to know is if .click will wait for the .mouseDown to completely run through before the code for .click starts running? As in, its guaranteed to do so, or if i have to write logic to ensure that.

http://stackoverflow.com/questions/12572644/differentiate-click-vs-mousedown-mouseup — Patrick Q, Mar 04 '14 at 14:53

adeneo · Accepted Answer · 2014-03-04T15:44:45.917

It has nothing to do with jQuery, it's how the events are defined in javaScript.

A click event is a mousedown followed by a mouseup on the same element.

In other words, the mousedown event fires first when the mouse button is pressed, then the mouseup event fires when the button is released, and if they both fired on the same element, the click event fires.

You can easily test this -> http://jsfiddle.net/4EUPm/

EDIT:

Edit #1 Lots of these responses are touching on my question a bit, but what i would like to know is if .click will wait for the .mouseDown to completely run through before the code for .click starts running? As in, its guaranteed to do so, or if i have to write logic to ensure that.

Javascript has only one thread, so two functions can not execute at the same time, with a few exceptions, like asynchronous methods.

Also, a click waits for both the mousedown and mouseup, and then checks both of those to see that the target was the same element, so yes, a click event handler can not fire until after the mousedown and the mouseup event has fired, it's just not possible.

Wether or not every piece of code inside the mousedown event handler finishes before the click event handler is fired, is impossible to answer without knowing exactly what's inside those event handlers, but generally all the code in the mousedown event handler will finish before the code in the click event handler starts, unless there's async behaviour or other strangeness going on.

Thanks! And if I sounded snide in my edit that wasn't the intention! — Carlos Bribiescas, Mar 04 '14 at 15:57

score 0 · Answer 2 · answered Mar 04 '14 at 15:09

0

The order is down,up,click. if you need to execute a delayed command in mousedown and would like to fire a second command if also the click event is fired, you can do something like this:

var clicked = 0;
$('#test').on('mousedown',function() {
//do animation stuff onmouse down
if(clicked)
{
    //do animation stuff onclick
    clicked = 0;
}
});

$('#test').on('click',function() {
 clicked = 1;
});

answered Mar 04 '14 at 15:09

Volkan Ulukut

4,230
1
20
38

up is triggered when the mouse is released,(_obviously it means that the mouse has been pressed_) but click is triggered when the mouse is pressed and released – Amit Joki Mar 04 '14 at 15:13
hey, is this kind of revenge ? – Amit Joki Mar 04 '14 at 15:14
well probably yours is a revenge since you are misleading OP with wrong answer, and my answer has nothing wrong in it, or you haven't pointed out one yet. – Volkan Ulukut Mar 04 '14 at 15:14
once i downvoted yours, my answer got downvoted so i thought, any way thanks – Amit Joki Mar 04 '14 at 15:15
i changed it, sorry by the way, didn't thought that alert would have side effects. Deleted my post and undoed the downvote. – Amit Joki Mar 04 '14 at 15:17

JQuery Mouse Events

2 Answers2