dblclick 在触摸设备上不起作用

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

Answer 1

对于移动设备，我会使用特定于移动设备的事件（例如 Taphold）而不是双击，因为它可能会带来更原生的用户体验。

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

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)

如果出现此错误：
由于目标被视为被动，因此无法防止被动事件侦听器内的默认行为。

如果 element = "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)

Answer 3

我自己修复它是这样的：

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