Question

I’m working on a function so that when an user clicks and holds onto a link, the link does not send the user to the appropriate link. However, the function that I used is not working. What I want is for the user to click on a link and if they hold it down for longer than one second, the link no longer works and no event is fired. After looking through it sometime, I can’t find what’s wrong with the code. So my question is, what did I do wrong? http://jsfiddle.net/rQP6g/2/

<a href="www.google.com" >link</a>

<script>
var timeoutId = 0;
    $('a').mouseup(function() {
    timeoutId = setTimeout(function(e) {  
    e.preventDefault();
e.stopPropagation();
}, 1000);
}).bind('mouseup', function() {
clearTimeout(timeoutId);
});
</script>

Answer 1

This should work: http://jsfiddle.net/rQP6g/18/

The JS looks as follows:

var mousedownTime;

$('a').mousedown(function(e) {
    mousedownTime = new Date();
}).click(function(e) {
    // If the mouse has been hold down for more than 1000 milliseconds ( 1 sec. ), cancel the click
    if(Math.abs(new Date() - mousedownTime) > 1000)
        e.preventDefault();
});​

The basic idea is to capture the time when the mouse button is pressed down – then, when released, the click event is fired and it is computed if more than 1 sec. has elapsed since the link was pressed. If this is the case, the click event is cancelled and the link won’t load 🙂