javascript - 如何使 ondblclick 事件在手机上起作用？

Question

我想像这样在特定的 div 上实现双击事件:

<div   id="divID" ondblclick = 'alert("double click!!");' >

它可以在 google chrome 浏览器上运行，但是当我用手机打开它时它不起作用，顺便说一句，单击一下就可以了。

ps: 我加了这两件事

<meta name="viewport" content="width=device-width, initial scale=1,user-scalable=no">

还有这个

body {
-ms-touch-action: manipulation;
touch-action: manipulation;}

但是没用!

Answer 1

我遇到了同样的问题。在触摸设备上，如果您想检测双击手势并且在大多数情况下使用 ondblclick 事件，它不会起作用，而且问题是它还会触发 onclick。解决方案之一是使用以下代码示例实现双击检测模式:

var doubletapDeltaTime_ = 700;
var doubletap1Function_ = null;
var doubletap2Function_ = null;
var doubletapTimer = null;

function tap(singleTapFunc, doubleTapFunc) {
    if (doubletapTimer==null) {
    // First tap, we wait X ms to the second tap
        doubletapTimer_ = setTimeout(doubletapTimeout_, doubletapDeltaTime_);
        doubletap1Function_ = singleTapFunc;
        doubletap2Function_ = doubleTapFunc;
    } else {
    // Second tap
        clearTimeout(doubletapTimer);
        doubletapTimer_ = null;
        doubletap2Function_();
    }
}

function doubletapTimeout() {
// Wait for second tap timeout
    doubletap1Function_();
    doubleTapTimer_ = null;
}

你可以这样调用它

<div   id="divID" onclick="tap(tapOnce, tapTwice)" >

tapOnce 和 tapTwice 是您的函数，将在各自的情况下调用。该解决方案也适用于浏览器。

Reference