Question

我希望在特定div上实现双击事件，如下所示：

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

它适用于谷歌浏览器浏览器，但是当我用手机打开它时，它不起作用，就像单击一样。

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

Answer 2

这是外部函数'doubletap'，它可以提供帮助：

/*
 * jQuery Double Tap
 * Developer: Sergey Margaritov (sergey@margaritov.net)
 * Date: 22.10.2013
 * Based on jquery documentation http://learn.jquery.com/events/event-extensions/
 */

(function($){

  $.event.special.doubletap = {
    bindType: 'touchend',
    delegateType: 'touchend',

    handle: function(event) {
      var handleObj   = event.handleObj,
          targetData  = jQuery.data(event.target),
          now         = new Date().getTime(),
          delta       = targetData.lastTouch ? now - targetData.lastTouch : 0,
          delay       = delay == null ? 300 : delay;

      if (delta < delay && delta > 30) {
        targetData.lastTouch = null;
        event.type = handleObj.origType;
        ['clientX', 'clientY', 'pageX', 'pageY'].forEach(function(property) {
          event[property] = event.originalEvent.changedTouches[0][property];
        })

        // let jQuery handle the triggering of "doubletap" event handlers
        handleObj.handler.apply(this, arguments);
      } else {
        targetData.lastTouch = now;
      }
    }
  };

})(jQuery);

Answer 3

将jQuery Mobile加载到您的项目中，并尝试使用taphold或通过该API可用的其他一些移动特定触摸事件。

这里是jQuery Mobile文档，其中包含您可以使用的所有事件：http://api.jquerymobile.com/category/events/

Answer 4

这是 TS React 用户的代码片段。传入click事件，这样只有在同一个元素被点击两次时才会调用双击

import React from "react";

type CallBack = () => any;
type TapParams = { onSingleTap?: CallBack; onDoubleTap?: CallBack };

var DELTA_TIME_THRESHOLD_MS = 700;
var timer: NodeJS.Timeout | null = null;
var target: EventTarget;

export function tap(
  e: React.MouseEvent,
  { onSingleTap, onDoubleTap }: TapParams
) {

  if (timer == null) {
    // First tap
    onSingleTap?.();

    timer = setTimeout(() => {
      timer = null;
    }, DELTA_TIME_THRESHOLD_MS);
  } else {
    // Second tap
    if (e.target === target) {
      onDoubleTap?.();
    }

    clearTimeout(timer);
    timer = null;
  }
  target = e.target;
}

用法

<div
  onClick={(e) => tap(e, { onSingleTap, onDoubleTap })}
>Tap or doubletap</div>

如何使ondblclick事件在手机上工作？

4 个答案: