dblclick doesn't work on touch devices

Question

What would be the best way to have dblclick works on touch devices and PC browsers

Below code works perfectly fine with mouse double click but when tried on android touch device , doesn't work. What should I do differently? Very new to this

$(document).on("dblclick","#table_discrepancy tr", function() {

 var orderno = $(this).find("td:eq(0)").text();
 var workorderno = $(this).find("td:eq(1)").text();

    server('/get_customer_info/' + orderno, function(result){

     var cus_name = result.name.replace(/^[\s]+/, '');
     cus_name = cus_name.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
     var phone_no = result.phoneno.replace(/^[\s]+/, '');
     var email = result.email.replace(/^[\s]+/, '');

          $('#customer_info_modal').modal('show');

          $('#orderno_modal').html('Order# : ' + orderno);
          $('#workorderno_modal').html('Work Order# : ' + workorderno);
          $('#customer_name_modal').html('Name : ' + cus_name);
          $('#customer_phoneno_modal').html('Phone#: ' + phone_no);
          $('#customer_email_modal').html('Email: ' + email);
    });
})

score 1 · Accepted Answer · answered Aug 21 '17 at 20:23

1

For mobile, I would use a mobile specific event such as taphold instead of double click as it will probably give a more native feeling user experience.

You can use jQuery mobile to provide mobile specific events: http://api.jquerymobile.com/category/events/

answered Aug 21 '17 at 20:23

TripWire

532
7
18

1

Thank you, tried to use that but as of long pages need to scroll down in device , during spelldown that trigger that `TAPHOLD` , so decided to use double click... – Nick Aug 21 '17 at 20:29
This is a bit hacky but you could try some of these solutions: https://stackoverflow.com/questions/27560653/jquery-on-double-click-event-dblclick-for-mobile There is one that stops the user from scaling which interferes with the double click event that might work, but might also be annoying for users. – TripWire Aug 21 '17 at 20:33

user19871821 · Answer 2 · 2022-08-29T15:17:12.647

Using only JavaScript

You can use "touchstart" event for a single touch,
but with calculating the time when he should click again

I used 400 (0.4s) as it's the longer duration between two touches
It's only an estimate, but it's still a reasonable time

let expired

let doubleClick = function () {
    console.log('double click')
}

let doubleTouch = function (e) {
    if (e.touches.length === 1) {
        if (!expired) {
            expired = e.timeStamp + 400
        } else if (e.timeStamp <= expired) {
            // remove the default of this event ( Zoom )
            e.preventDefault()
            doubleClick()
            // then reset the variable for other "double Touches" event
            expired = null
        } else {
            // if the second touch was expired, make it as it's the first
            expired = e.timeStamp + 400
        }
    }
}

let element = document.getElementById('btn')
element.addEventListener('touchstart', doubleTouch)
element.addEventListener('dblclick', doubleClick)

In case of this error :
Unable to preventDefault inside passive event listener due to target being treated as passive.

event.preventDefault( ) not working if element = "document" or "document.body"
So the solution of that, you should have a full page div container :

let element = document.getElementById('container')
element.style.minWidth = '100vw'
element.style.minHeight = '100vh'
document.body.style.margin = '0px'
element.addEventListener('touchstart', elementTouch)
element.addEventListener('dblclick', doubleClick)

dblclick doesn't work on touch devices

2 Answers2