48

I am learning events in jquery. While implementing them i came across a doubt. What is the difference between mousedown() and click() event. And which event should i use at what condition.?

For example: Both the events perform the same task in the below code:

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});


$("#p1").click(function(){
  alert("Mouse down over p1!");
});

Both perform the same.Can someone clarify the difference. If same, which should i prefer?.

poorvank
  • 7,524
  • 19
  • 60
  • 102

8 Answers8

66

onMouseDown will trigger when either the left or right (or middle) is pressed. Similarly, onMouseUp will trigger when any button is released. onMouseDown will trigger even when the mouse is clicked on the object then moved off of it, while onMouseUp will trigger if you click and hold the button elsewhere, then release it above the object.

onClick will only trigger when the left mouse button is pressed and released on the same object. In case you care about order, if the same object has all 3 events set, it's onMouseDown, onMouseUp, then onClick. Each even should only trigger once though.

Details:

http://api.jquery.com/click/
http://api.jquery.com/mouseup/
http://api.jquery.com/mousedown/

Source written by Anton Baksheiev

Community
  • 1
  • 1
pablofiumara
  • 1,747
  • 1
  • 16
  • 24
  • 6
    Those URL's refer to jQuery, while `onClick`, `onMouseUp` and `OnMouseDown` aren't really jQuery events, but JavaScript events. I think it's better to link to [a w3c spec in this case.](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents) (Scroll down a bit on the linked page) – Mathijs Flietstra Oct 01 '13 at 07:01
  • But if we bind both click and mousedown events on same element. mousedown event is always firing not the click. Why is it so happening. What do we do if we need both mouse down and click. see this jsfiddle http://jsfiddle.net/a74k92dd/ – Arvin Oct 20 '14 at 11:21
20

A mousedown event is fired when the mouse button is pressed but before it is released.

The click event is fired after the mousedown and mouseup events.

Jivings
  • 22,834
  • 6
  • 60
  • 101
  • 1
    You should also mention that 'click' event is triggered if mousedown and mouseup event occurs on same elemtn. – Akansh Mar 17 '17 at 10:01
2

onmousedown + onmouseup = onclick (click event);

** actions **                             ** event **

mouse press/down                          onmousedown
mouse release/up                          onmouseup
mouse press/down + mouse release/up       onclick
Key Enter/space press                     onclick
user8640104
  • 1,018
  • 9
  • 7
1

$(element).click() fires, when you press mouse button and then release it.

$(element).mousedown() fires, then you press the mouse button.

Try to hold the clicked button over that button, and then release it here: http://jsfiddle.net/n9rJ9/

Artyom Neustroev
  • 8,627
  • 5
  • 33
  • 57
1

They do not. You might think so, as you bound both event handlers on the same element, so mousedown will always fire before the click event will occur.

If you bind them on different elements, you will see mousdown will always fire on a button press (any mouse button) without a release and click will fire, after you have released the mouse button of the left (primary) side.

See this small jsfiddle: http://jsfiddle.net/wBfbm/

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});


$("#p2").click(function(){
  alert("Mouse down over p1!");
});
yan.kun
  • 6,820
  • 2
  • 29
  • 38
1

onMouseDown will trigger when either the left or right (or middle) is pressed.

onClick will only trigger when the left mouse button is pressed and released on the same object.

Linga
  • 10,379
  • 10
  • 52
  • 104
1

Another main difference (and a very important one to support accessibility):

  • Click event will get triggered when an element (for example button) has focus and the "Enter" key is pressed

  • Mousedown event will not get triggered with keyboard action.

Also, mousedown will not work with touch screens.

You will have to add mousedown, keydown, and touchstart events to replicate the click event.

user4617883
  • 1,277
  • 1
  • 11
  • 21
0

Try this way. Because event.stopPropagation does not stop click event event from mouse down. Mouse down and click events are not related to each other.

 var mousedDownFired = false;

  $("#id").mousedown(function(event){
      mousedDownFired =true;
      //code
  });

  $("#id").click(function(event){
     if(mousedDownFired)
      {
         mousedDownFired = false;
         return;
      }
      //code
 });

Updated:

NO . Mouse events are triggered like this way

1) MouseDown

2) Click

3) MouseUp

if mouse down is triggered then flag will enable after mouse down event click will trigger .In this click event will disable the flag variable. this will work as cyclic way. not going to consider two mouse down or two click

Gaurav Agrawal
  • 4,355
  • 10
  • 42
  • 61
  • 2
    Well that's just plain wrong. You need to update this post such that it has the correct information. You can plainly see from this codepen that the order is mousedown, mouseup, click: https://codepen.io/mudassir0909/pen/eIHqB – kamelkev Feb 18 '17 at 01:29
  • The order may vary depending on the browser being used. I have not tested it across browsers. However, in my observations of events handled in Chrome the events are triggered in the order of mousedown, mouseup, and then click. – BrightIntelDusk May 19 '17 at 23:03
  • All browsers fire in order: mousedown, mouseup, click, not the order stated in this answer. – JonBrave Jun 30 '17 at 15:15