47

Using jQuery, I often like to use mousedown and mouseup events in conjunction for pushable buttons.

However, in every case I've used the mouseup event, binding the click event instead seemed to produce identical results.

Is there any substantial difference between the two methods below?

// Method 1
$('.myButton').bind('click', callback);

// Method 2
$('.myButton').bind('mouseup', callback);

Please note I'm seeking a technical explanation on the differences between using both methods. This has no relation to the question that has been flagged as a dupe: Differentiate click vs mousedown/mouseup

Community
  • 1
  • 1
caiosm1005
  • 1,686
  • 1
  • 19
  • 31
  • 1
    @OneTrickPony I disagree. I want to know the technical difference between the two events, not to detect if the user clicks and holds. – caiosm1005 Feb 11 '13 at 02:54
  • 2
    Remember that Mouse Events don't work on gesture based devices like Ipads or mobile phones. – im_benton Feb 11 '13 at 02:57

5 Answers5

91

With a mouseup event, you can click somewhere else on the screen, hold down the click button, and move the pointer to your mouseup element, and then release the mouse pointer.

A click event requires the mousedown and mouseup event to happen on that element.

The normal expectation is that a click requires both the mousedown and mouseup event, so I'd recommend the click event.

From the possible duplicate, it appears that mouseup and mousedown events can also be caused by mouse buttons other than the left click button. Which is very different from what a generic user would expect.

Bill Lynch
  • 80,138
  • 16
  • 128
  • 173
  • 3
    W3C recommends the use of `click` in most mouse events where `click`, `mousedown`, and `mouseup` would achieve the desired results. The latter two exist for added control when needed. – Derrick Tucker Feb 11 '13 at 03:00
  • Bill according to my tests it seems that click can also be fired by any mouse button. See http://jsfiddle.net/zRr4s/84/ – Sebastien Lorber Aug 04 '15 at 10:59
  • 2
    The middle scroll button on the mouse can also cause click events when clicked on top of the element. – jessica Oct 02 '15 at 00:31
  • Form some quick tests I did the middle scroll button doesn't trigger the event in Firefox when using the 'click' event handler, but triggers with 'mousedown' and 'mouseup'. If I need to monitor click and middle click events on a link, are there any greater disadvantages using 'mouseup' other than the user maybe not being on the link anymore and therefore not triggering it? – retrovertigo Jun 01 '16 at 03:23
3

My understanding is that "click" hides lots of complexities (such as making sure that mousedown/up occur on the same element, cancelling with ESC/right click). Using "click" over "mousedown/up" should be preferred.

One scenario where "click" does not seem to work when app updates content very often in such a way that underlying DOM elements get replaced. In this case "click" will not be triggered and it might result in poor customer experience.

ZakiMa
  • 5,637
  • 1
  • 24
  • 48
2

I think Mouse Down and Mouse Up events give you further control over the click event. It divides the click event into two more events so that more details can be coded for each event. Click event restricts the mouse click and force you to code both the events in the same function.

You can understand this restriction if you ever try to make your own dragging behavior.

  1. Dragging needs a mouse-down event to start a drag behavior. You cannot do it with click event. And since you need a separate mouse-down event. The requirement of a separate mouse-up event becomes obvious.
  2. Once the dragging starts ( you have not yet release the mouse button) you need the object to change position as per the cursor position. This too needs to be coded only in mouse-down event.

However you can use click event too if we could change the way how people drag the objects. For example click-1 starts the drag and click-2 stops the drag and puts the object on another position. But there are two problems I see:

  1. It does not look natural. As in the real world we are in habit of pressing the object and dragging it.
  2. It can be process intensive to move heavy graphics just by clicking and mouse-move.
Vishwas
  • 1,533
  • 2
  • 19
  • 40
1

I would like to add to the other answers that click event works on touch-enabled devices while mouseup / mousedown do not (obviously because there's no "mouse")

Note that there's a 300ms delay on touch devices with the click event.

vsync
  • 118,978
  • 58
  • 307
  • 400
0

The biggest difference that affects the way I code is: the click event on an a HTML tag is responsible for changing the URL. In contrast, the mousedown and mouseup events will not acheive this

caiosm1005
  • 1,686
  • 1
  • 19
  • 31
whitneyit
  • 1,226
  • 8
  • 17