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

Detect double tap on ipad or iphone screen using javascript

提问by enne87

I'd like to detect if a user has double tapped on an ipad or iphone.

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

Does a javascript-event exist which would provide this functionality?

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

采纳答案by bobek

You could use jQuery mobile library to build your application: http://jquerymobile.com/; it has plenty of touch events built in. Also you could try jQuery touch library : http://jqtouch.com/

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

回答by Jorge

This could be used for a double tap or a double click. In pure javascript:

这可用于双击或双击。在纯 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();

}

回答by Adam

One basic idea is to do it like this:

一个基本的想法是这样做：

1. In order to create a double-tap (or double click) event you need to create code on the onClickevent.

2. The reason you most likely want double-tap/click is because you already have something attached to the onClickevent and need a different gesture on the same element.

3. This means that your onClickevent should only launch the onClickevent after a setTimeout()is acknowledged.

4. So the basic code would launch the function attached to the onClickevent using a setTimeout()command. The first click says "Start timer + run function using setTimeout()after say..500 milliseconds. The second time you clicked, you would check to see if the second click was inside a specific time frame in order to count as a double tap. So if the End time was less than 500 milliseconds, you would cancel the setTimeout()using clearTimeout()and then launch a completely different function (the function you wanted to launch for double tab/click)

5. Stopping default action? - Probably somthing like stopPropagation()or cancelBubble()would do the trick. Honestly, I don't know but that's where I'd start researching.

1. 为了创建双击（或双击）事件，您需要在onClick事件上创建代码。

2. 您最可能想要双击/单击的原因是因为您已经将某些内容附加到onClick事件并且需要在同一元素上使用不同的手势。

3. 这意味着您的onClick事件应仅onClick在 asetTimeout()被确认后启动该事件。

4. 因此，基本代码将onClick使用setTimeout()命令启动附加到事件的函数。第一次点击显示“setTimeout()在说..500 毫秒之后使用启动计时器 + 运行功能。第二次点击时，您将检查第二次点击是否在特定时间范围内，以便计为双击。所以如果结束时间小于 500 毫秒，您将取消setTimeout()使用clearTimeout()，然后启动一个完全不同的功能（您想要双击/单击启动的功能）

5. 停止默认操作？- 可能像stopPropagation()或cancelBubble()会做的伎俩。老实说，我不知道，但这就是我开始研究的地方。

回答by Anulal S

Detect Double Tap

检测双击

try the following snippet on a touch device

在触摸设备上尝试以下代码片段

event.preventDefault()will disable double tap zoomon div#double-tap

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> 

回答by Dr. Aaron Dishno

I created this one in JavaScript and it seems to work well. (I tested it on my iPad 2.) It is basically the code for what is said above.

我用 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");

    }
}

回答by Abdullah

I found this solution on Stackoverflow somewhere but forgot what exact post. It works for a doubleclick on a browser and double tap on iPhone.

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

I use 'touchend click'to detect the double click on both browser and iPhone. To implement just on iPhone, remove the click.

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

回答by Interrobang

Double tap on an iPad is tricky because the browser, by default, absorbs this event as a "zoom" event, as seen here:

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

However, if you cancel the default behavior, you can grab the doubletap yourself. Here's an example of a plugin that does this for you-- the jQuery doubletap plugin.

但是，如果您取消默认行为，您可以自己抓住双击。这是为您执行此操作的插件示例 - jQuery doubletap 插件。

回答by Attenzione

based on latest jquery docs, double tap implementation

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

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

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

回答by ngryman

You could also use jquery.fingerwhich supports delegated events.

您还可以使用支持委托事件的jquery.finger。

回答by user1455009

technoweenie's jquery.doubletap does and this link: jQuery mobile events finally launchedseems to be able to solve the task ...

technoweenie 的 jquery.doubletap 确实如此，这个链接：jQuery mobile events finallylaunch 似乎能够解决这个任务......

回答by ??ng Qu?c Trung

Might be late (Actually yup it's damn late), but the pure and easy JS solution for those lurking in the future:

可能会迟到（实际上是的，它已经晚了），但是对于那些潜伏在未来的人来说，纯粹而简单的 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;
}

With this you can easily make single tap event, double, triple, fourth,... to infinity and beyond!
Notice: to use element checking, call the function like:
dbtapper(YOURELEMENT), ie: <span onclick="dbtapper(this)">Click Me</span>

有了这个，您可以轻松地进行单击事件，两次、三次、四次……到无穷大甚至更远！
注意：要使用元素检查，请调用如下函数：
dbtapper(YOURELEMENT), ie: <span onclick="dbtapper(this)">Click Me</span>

It's not forced tho, you can use it without just fine (dbtapper()), but if you need to pass argument into the function make sure you type false for the first argument if you doesn't point it to the element.

它不是强制的，您可以使用它而不是很好 ( 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.