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);
    });
})

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);
    });
})

• javascript
• android
• jquery
• touch

3 Answers 3

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)

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./category/events/

I fixed it myself like this:

this.canvas.addEventListener('touchend', (e) => {
    // time of current press
    const currentTime = new Date().getTime()
    // time between presses
    const tapLength = currentTime - this.lastTap

    if (tapLength < 500 && tapLength > 0) {
        // if double click
        e.preventDefault()
        this.avatarInput.click()
    } else {
        // if single click
        this.isPinching = false
    }
    // remember the time of the last touch
    this.lastTap = currentTime
})