Differentiate click vs mousedown/mouseup

Question

I've read several answers on stackoverflow pertaining to this situation, but none of the solutions are working.

I'm trying to do different things based upon whether a user clicks an element, or holds the mouse down on that element using jQuery.

Is it possible to accomplish this?

Answer 1

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/

Answer 2

Here's one approach

1. set a variable to true
2. make a function that will set it to false when called
3. have a timer ( setTimeout() ) start counting down on mousedown()
4. on mouseup, clear the timeout, and check if it the variable is true or false
5. if it is false, call the function you want to happen on click
6. In any case, set the variable back to true

This will do what you want. Here's a jsfiddle showing how it might work: http://jsfiddle.net/zRr4s/3/