Difference between mousedown and click in jquery

Question

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?.

Answer 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!");
});