双击在触屏设备上无法使用

Question

如何让 dblclick 在触摸设备和PC浏览器上正常工作？

以下代码在鼠标双击时可以完美运行，但在Android触摸设备上使用时无法正常工作。我应该怎么做呢？我对此非常陌生。

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

- Nick

Answer 1

对于移动端，我会使用特定于移动设备的事件，如taphold而不是double click，因为它可能会提供更本地化的用户体验。

您可以使用jQuery mobile提供移动特定事件： http://api.jquerymobile.com/category/events/

- TripWire

---

谢谢，我尝试使用那个方法，但由于页面很长需要在设备上向下滚动，在拼写检查期间会触发TAPHOLD，因此决定使用双击... - Nick

这个方法有点取巧，但你可以尝试一些这样的解决方案：https://dev59.com/oV4c5IYBdhLWcg3wv8lm其中有一个可以阻止用户缩放并干扰双击事件的解决方案，可能会起作用，但也可能会让用户感到烦恼。 - TripWire

Answer 2

仅使用JavaScript

你可以使用“touchstart”事件进行单点触控，
但需要计算出再次点击的时间。

我使用了400毫秒（0.4秒）作为两次触摸之间较长的持续时间。
这只是一个估计，但仍然是一个合理的时间。

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)

如果出现以下错误：
由于目标被视为被动，无法在被动事件侦听器中防止默认行为。

如果元素为“document”或“document.body”，则无法使用event.preventDefault（）；
因此，解决方法是应该有一个完整页面的div容器：

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)

- user19871821