[Solved] Differentiate click vs mousedown/mouseup

Solution #1:

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/

Solution #2:

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/

Solution #3:

Here’s a solution that supports both clicks and holds:

// Timeout, started on mousedown, triggers the beginning of a hold
var holdStarter = null;
// Milliseconds to wait before recognizing a hold
var holdDelay = 500;
// Indicates the user is currently holding the mouse down
var holdActive = false;
// MouseDown
function onMouseDown(){
    // Do not take any immediate action - just set the holdStarter
    //  to wait for the predetermined delay, and then begin a hold
    holdStarter = setTimeout(function() {
        holdStarter = null;
        holdActive = true;
        // begin hold-only operation here, if desired
    }, holdDelay);
}
// MouseUp
function onMouseUp(){
    // If the mouse is released immediately (i.e., a click), before the
    //  holdStarter runs, then cancel the holdStarter and do the click
    if (holdStarter) {
        clearTimeout(holdStarter);
        // run click-only operation here
    }
    // Otherwise, if the mouse was being held, end the hold
    else if (holdActive) {
        holdActive = false;
        // end hold-only operation here, if desired
    }
}
// Optional add-on: if mouse moves out, then release hold
function onMouseOut(){
    onMouseUp();
}

Here’s a demo: http://jsfiddle.net/M7hT8/1/

Originally based on daveyfaherty’s solution.
I know this question is from a while ago, but I’m sharing my solution for anyone who finds this via a search.

Solution #4:

//last mouse coordinate
var mouseX = 0;
//epsilon interval
var mouseEps = 10;

function mouseDownHandler(e) {
    e.preventDefault();
    mouseX = e.clientX;
};

function mouseUpHandler(e) {
    e.preventDefault();
    if (Math.abs((mouseX - e.clientX)) < mouseEps) {
        clickHandler(e);
    }
};

function clickHandler(e) {
};