双击jQuery的手机

Question

i have code to download image:

<a href="$img" class="download-img" download><img src="$img"></a>

and i have function to check double click from mobile devices:

var touchtime = 0;

$('.download-img').on('click', function() {
    if(touchtime == 0) {
        //set first click
        touchtime = new Date().getTime();
    } else {
        //compare first click to this click and see if they occurred within double click threshold
        if(((new Date().getTime())-touchtime) < 800) {
            //double click occurred
            alert("double clicked");
            touchtime = 0;
        } else {
            //not a double click so set as a new first click
            touchtime = new Date().getTime();
        }
    } 
});

how i can join this 2 part of codes, to make download image from double click, but not single

Answer 1

If you capture the event argument, you can call e.preventDefault() when it's a single click.

$('.download-img').on('click', function(e) {
    //                                  ^ capture the event
    if(touchtime == 0) {
        //set first click
        touchtime = new Date().getTime();
        e.preventDefault();
    } else {
        ...
    } 
});

You could also use the dblclick event instead of rolling your own double click logic.

Answer 2

Here is what I came up with. Though definitely check into that dblclick event MrCode mentioned in his answer.

$('.download-img').on('click', function(e){
    var $link = $(this);

    //if the time now minus the time stored on the link, or 0 if there is not one, is less than 800, it's valid
    if ( Date.now() - ($link.data('touchtime') || 0) < 800 ) {
        console.log('double click');
    } else {
        //time did not exist, or it exceeded the 800 threshold, set a new one
        $link.data('touchtime', Date.now());
        //prevent the click
        e.preventDefault();
    }
});