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

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

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

1. 要创建双击(或双击)事件,您需要在onClick事件上创建代码.

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

3. 这意味着您的onClick活动应仅onClick在setTimeout()确认后启动活动.

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

5. 停止默认操作？- 可能是喜欢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上双击很棘手，因为默认情况下，浏览器将此事件吸收为“缩放”事件，如下所示：

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