Search code examples
javascriptjquerytouch

jQuery on 'double click' event (dblclick for mobile)


I have the following jquery event handling function:

$('.target').on('dblclick', function() {
    //respond to double click event
});

My issue is that this event handler doesn't work on touch devices (iPhone, iPad...). Can anyone recommend a reliable alternative to dblclick that works on touch devices and still allows comfortable double click use on full size devices?


Solution

  • I ended up building a custom double click function that will work on both mobile and desktop:

    var touchtime = 0;
    $(".target").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();
            }
        }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div class="target">Double click me</div>

    Alternatively, here is the JSfiddle Demo.