Question

我有以下jquery事件处理函数：

$('.target').on('dblclick', function() {
    //respond to double click event
});

我的问题是这个事件处理程序不适用于触控设备（iPhone，iPad ......）。任何人都可以推荐一种适用于触摸设备dblclick的可靠替代方案，并且仍可以在全尺寸设备上轻松双击使用吗？

Answer 1

我最终构建了一个可在移动设备和桌面设备上运行的自定义双击功能：

＆＃13;

var touchtime = 0;
$(".target").on("click", function() {
    if (touchtime == 0) {
        // set first click
        touchtime = new Date().getTime();
    } else {
        // compare first click to this click and see if they occurred within double click threshold
        if (((new Date().getTime()) - touchtime) < 800) {
            // double click occurred
            alert("double clicked");
            touchtime = 0;
        } else {
            // not a double click so set as a new first click
            touchtime = new Date().getTime();
        }
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="target">Double click me</div>

＆＃13;

或者，这是JSfiddle Demo。

Answer 2

您可以在元素上绑定多个事件侦听器，并为触摸设备使用jQuery的tap事件。

$( ".target" ).on({
  dbclick: function() {
    //do stuff
  }, touch: function() {
    //do the same stuff
  }
});

Answer 3

将其添加到index.html

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

我发现移动缩放功能会抛弃Jquery的dblclick。基本上它说你的视口不会有效地改变关闭缩放。这适用于运行Chrome的Nexus 5。

Answer 4

@JRulle的标记答案似乎只适用于单个对象，如果你有许多具有相同类的实例，它们将被视为单个对象请参阅示例
Fiddle example

我的解决方案似乎适用于类似

的情况

var touchtime = 0;
$('.target').on('click', function() {
  if (touchtime == 0) {
    touchtime = new Date().getTime();
  } else {
    if (((new Date().getTime()) - touchtime) < 800) {
      alert("double clicked");
      touchtime = 0;
    } else {
      touchtime = 0;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="target">click me!</p>
<p class="target">then click me!</p>

<a href="#">click link</a>

Answer 5

感谢解决方案-我唯一要做的就是添加一个超时，以便可以将其视为单独的事件

var touchtime = 0;
var delay = 800;
var action = null;
$(".target").on("click", function() {
  /*Double Click */
  if((new Date().getTime() - touchtime) < delay){
     clearTimeout(action)
     alert('dbl');
     touchtime=0;
  }
  /* Single Click */
  else{
     touchtime = new Date().getTime();
     action = setTimeout(function(){
        alert('single');
     },delay);
  }
}));

尽管我尚未对其进行测试，但也许值得将以下内容添加到任何HTML <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>的标头部分中，如下所示：To "user-scalable=no" or not to "user-scalable=no"

Answer 6

具有自己的doubleclick计数器的多个目标。可接受的解决方案有2个错误，已在此处修复：

如果您单击目标并在外部单击并在800毫秒内再次单击目标，则将触发doubleclick事件。
如果您有多个目标，请在800毫秒内单击其他目标，然后会触发doubleclick事件。

$(document).on("click", function(e)
{
    var MAX_DELAY_IN_MS = 800;
    var current_time = new Date();
    var targets = $(".target");
    
    if ((typeof last_target == "undefined") || 
        (last_target == 0))
    {
        last_target = e.target;
        last_click  = current_time;
    }
    else
    {
        if ((last_target == e.target) && 
            ((targets.is(e.target) == true) || 
             (targets.has(e.target).length !== 0)) &&
            (current_time - last_click < MAX_DELAY_IN_MS))
        {
            alert("double clicked");
        }
        last_target = 0;
        last_click  = 0;
    }
});

div{display:inline-block; width:30px; height:30px; margin:5px;}
.target{background-color:lime;}
.no_target{background-color:orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="target"></div>
<div class="target"></div>
<div class="no_target"></div>
<div class="target"></div>

Answer 7

我知道问题已经得到解答，但我认为应该把我一直使用的解决方案，值得欢呼：

    var doubleClicked = false;
    $('.target').on('click', function() {   
        if (doubleClicked) {
            //do what you want to do on double click here
        }
        doubleClicked = true;
        setTimeout(() => {
            doubleClicked = false;
        }, 300);
    });

Answer 8

我对上面的代码进行了改进，单击后没有检测到双击：

var touchtime = 0;
$(".target").on("click", function() {
  if (((new Date().getTime()) - touchtime) < 500) {
    alert("double clicked");
  }
  touchtime = new Date().getTime();
});

此代码检测所有双击。我还将触摸时间缩短到500毫秒（标准双击时间）。

Answer 9

唯一的方法是自己检测双触摸。您可以通过如下所示保留最后一个 touch 事件时间戳来实现：

if (e.touches.length === 1) {
  if (this.lastTouchEventTimeStamp) {
    const timeInMillisecondsSinceLastTouch = e.timeStamp - this.lastTouchEventTimeStamp;
    if (timeInMillisecondsSinceLastTouch > 80 && timeInMillisecondsSinceLastTouch < 400) {
      // double tap will be detected here
      this.lastTouchEventTimeStamp = undefined;

      const dblClickEvent = new DragEvent('dblclick', {
        view: window,
        bubbles: true,
        cancelable: true
      });

      e.target.dispatchEvent(dblClickEvent);
    }
  }

  this.lastTouchEventTimeStamp = e.timeStamp;
}

Answer 10

以编程方式，上面给出的所有答案都很好。当你双击鼠标按钮时，它只是你手指上的质量，所以它可以很快......

另一方面，当点击触摸屏时，通常涉及更大的物理质量。更大的质量意味着更慢的时间。所以我的方法是“点击两次”而不是双击。

表示全局变量，例如 var ClickCounter=0; 函数作用域内

 ClickCounter++;
 Check if  ClickCounter ==2.
 Execute your Code.
 Reset counter ClickCounter=0 
 else return false or execute another code

Answer 11

偶然发现这个帖子，想提供更新的答案。

function doubleClick(event, callback) {
  var touchtime = $(event.target).data("touch-time");
  if (touchtime == undefined || touchtime == 0) {
    // set first click
    $(event.target).data("touch-time", new Date().getTime());
  } else {
    // compare first click to this click and see if they occurred within double click threshold
    if (((new Date().getTime()) - touchtime) < 800) {
      // double click occurred
      callback();
      $(event.target).data("touch-time", 0);
    } else {
      // not a double click so set as a new first click
      $(event.target).data("touch-time", new Date().getTime());
    }
  }
}

然后可以如下使用：

$(selector).click(function(event){
  doubleClick(event, function(){
    console.log("Hello World");
  });
});

这使用数据属性与全局变量来获取/设置触摸时间。

标准 dblclick 应该适用于现代移动浏览器。

Answer 12

就是这样...在CoffeeScript中

onDblClick = -> "...your function to be fired..."
dbl_click = null
$(element).on 'mousedown', ->
   onDblClick() if dbl_click
   dbl_click = true
   setTimeout () ->
       dbl_click = false            
   , 250

Answer 13

您需要在函数末尾输入“return false”，如下所示

var touchtime = 0;
$('.dbclickopen').click(function() {
    if(touchtime == 0) {
        //set first click
        touchtime = new Date().getTime();
    } else {
        //compare first click to this click and see if they occurred within double click threshold
        if(((new Date().getTime())-touchtime) < 800) {
            //double click occurred
            touchtime = 0;
            window.location = this.href;
        } else {
            //not a double click so set as a new first click
            touchtime = new Date().getTime();
        }
    }
    return false;
});

关于'双击'事件的jQuery（dblclick for mobile）

13 个答案: