What's the difference between 'mouseup' and 'click' events?

Question

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

Answer 1

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.