Question

我想检测用户是否在ipad或iphone上双击。

是否存在可提供此功能的javascript事件？

Answer 1

这可用于双击或双击。在纯javascript中：

var mylatesttap;
function doubletap() {

   var now = new Date().getTime();
   var timesince = now - mylatesttap;
   if((timesince < 600) && (timesince > 0)){

    // double tap   

   }else{
            // too much time to be a doubletap
         }

   mylatesttap = new Date().getTime();

}

Answer 2

一个基本想法是这样做：

要创建双击（或双击）事件，您需要在onClick事件上创建代码。
您最有可能想要双击/点击的原因是因为您已经在onClick事件附加了某些内容，并且需要在同一元素上使用不同的手势。
这意味着您的onClick活动只应在确认onClick后启动setTimeout()活动。
因此，基本代码将使用onClick命令启动附加到setTimeout()事件的函数。在第一次点击之后，第一次单击“使用setTimeout()启动计时器+运行功能。”第二次单击时，您将检查第二次单击是否在特定时间范围内，以便计为如果结束时间小于500毫秒，你可以使用setTimeout()取消clearTimeout()，然后启动一个完全不同的功能（你要为双标签/点击启动的功能）< / p>
停止默认操作？ - 可能像stopPropagation()或cancelBubble()这样的事情就可以了。老实说，我不知道，但那是我开始研究的地方。

Answer 3

检测双击

在触控设备上尝试以下摘录

event.preventDefault()将停用div#double-tap上的双击缩放

document.getElementById("double-tap").addEventListener("touchstart", tapHandler);

var tapedTwice = false;

function tapHandler(event) {
    if(!tapedTwice) {
        tapedTwice = true;
        setTimeout( function() { tapedTwice = false; }, 300 );
        return false;
    }
    event.preventDefault();
    //action on double tap goes below
    alert('You tapped me Twice !!!');
 }

div#double-tap {
  height: 50px;
  width: 200px;
  border: 1px solid black;
  background-color: lightblue;
  line-height: 50px;
  text-align: center;
  margin: 50px auto;  
}

<div id="double-tap">Double Tap Me !!!</div>

Answer 4

我在JavaScript中创建了这个，它似乎运行良好。（我在iPad 2上测试过它。）它基本上就是上面所说的代码。

var clickTimer = null;

function touchStart() {
    if (clickTimer == null) {
        clickTimer = setTimeout(function () {
            clickTimer = null;
            alert("single");

        }, 500)
    } else {
        clearTimeout(clickTimer);
        clickTimer = null;
        alert("double");

    }
}

Answer 5

我在Stackoverflow上找到了这个解决方案，但忘了确切的帖子。它适用于双击浏览器并双击iPhone。

我使用'touchend click'来检测浏览器和iPhone上的双击。要在iPhone上实现，请删除点击。

var timeout;
var lastTap = 0;

$('element').on('touchend click',function(e){
    var currentTime = new Date().getTime();
    var tapLength = currentTime - lastTap;        

    e.preventDefault();
    clearTimeout(timeout);

    if(tapLength < 500 && tapLength > 0){

        //Double Tap/Click

    }else{

        //Single Tap/Click

        timeout = setTimeout(function(){
            //Single Tap/Click code here

            clearTimeout(timeout); 
        }, 500);
    }
    lastTap = currentTime;
});

Answer 6

在iPad上双击是很棘手的，因为默认情况下，浏览器将此事件吸收为“缩放”事件，如下所示：

Doubletap - Apple API docs

但是，如果您取消默认行为，则可以自行获取双击。以下是一个为您执行此操作的插件示例 - jQuery doubletap plugin。

Answer 7

基于最新的jquery文档，双击实现

https://gist.github.com/attenzione/7098476

Answer 8

technoweenie的jquery.doubletap呢和这个链接：jQuery mobile events finally launched 似乎能够解决任务......

Answer 9

您还可以使用支持委派活动的jquery.finger。

Answer 10

可能会迟到（实际上是的，该死的太晚了），但是对于那些将来潜伏的人来说，纯净而简单的JS解决方案是：

var tapped="";
function dbtapper(elem=false,arg1, arg2, arg3, timer=1400){
    if(tapped==""){
        //Here is single tap

        tapped = setTimeout(function(){tapclean()}, timer)
        lastclick = elem;
        //variable lastclick is to prevent double clicking from happen
        //when clicking different object with double-click listener.

    } else if(lastclick==elem){
        //Here is double tap, if you want more (triple&beyond),
        //add doubletap/tripletap checker variable into tapclean().
        //and set it to true here!, example included.
        //you could also add more setTimeout to var-tapped so user will
        //have more time to do triple&up taps.

        tapclean();
        //doubletapped=true;
        mypersonalfunc(arg1, arg2, arg3);
    } else {
        tapped = setTimeout(function(){tapclean()}, timer);
        lastclick = elem;
}
}
function tapclean(){
    clearTimeout(tapped);
    tapped="";
    //doubletapper=false;
}

借助此功能，您可以轻松地进行单击事件，包括两次，三次，第四次……至无穷远！
注意：要使用元素检查，请调用以下函数：
dbtapper(YOURELEMENT), ie: <span onclick="dbtapper(this)">Click Me</span>

这不是强制性的，您可以在没有问题的情况下使用它（dbtapper()），但是如果您需要将参数传递给函数，请确保在未指向第一个参数的情况下键入false元素。

Without element pointer: dbtapper(false,yourarguments)
With element pointer: dbtapper(document.getElement*******,yourarguments)
Alternatively, you can use an unique elem arg for each element:
                    dbtapper('omega',yourarg) or dbtapper(69,yourarg)
Though this is not recommended if you have a huge amount of double tapping elements.

Answer 11

您可以使用jQuery移动库来构建您的应用程序：http://jquerymobile.com/;它内置了大量的触摸事件。您还可以尝试jQuery触摸库：http://jqtouch.com/

使用javascript在ipad或iphone屏幕上检测双击

11 个答案:

检测双击