Question

I have a button, I want to call different functions based on whether the user has clicked the button once or long pressed it.

The single click works fine, however if I long press the button, the long press function is executed, followed by the single click function.

Here is the code I’m using.

var timeout, clicker = $('#clicker');
var count = 0;

clicker.mousedown(function(){
timeout = setInterval(function(){
    clicker.text(count++);
}, 500);

return false;
});

$(document).mouseup(function(){
clearInterval(timeout);
return false;
});


clicker.click(function(){
$(this).css('background', 'red');
return false;
});

​

See this fiddle: http://jsfiddle.net/8FmRd/181/

On the first long press the color of the div shouldn’t change to red.

Answer 1

http://jsfiddle.net/8FmRd/189/

var timeout, clicker = $('#clicker');
var count = 0;

clicker.mousedown(function(){
    count = 0;
    timeout = setInterval(function(){
        clicker.text(count++);
    }, 500);

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});

clicker.click(function(){
    clearInterval(timeout);
    if (count < 1) {
        $(this).css('background', 'red');
    }
    return false;
});