移动端开发,javascript如何监听用户是长按界面?

Question

如题，需要用户按住界面上一个按钮两秒钟然后才能执行别的操作，如何判断用户是否长按界面2s

Answer 1

touchstart touchend 用这两个时间就行, start 的适合记录当前时间 new Date().getTime() ,End 的时候做时间差,大于2000 就是 2s 了.

扩展: 给 start 一个 setTimeout, 如果 end 的时候小于 2s 就 clearTimeout . 否则 setTimeout 就执行了,不会出现按下4 5秒才抬手的问题.

Answer 2

示意代码：

var pressFlag;

$("#btn").on("touchstart", handleTouch).on("touchend", handleTouch);

function handleTouch(event){
    var timeLimit = 2000;

    if(event.type === "touchstart"){
        pressFlag = setTimeout(doSomethingWhenLongPress, timeLimit);
    }else if(event.type === "touchend"){
        clearTimeout(pressFlag);
    }
}

Answer 3

var btn = document.querySelector("a#btn");
var start = 0;
btn.addEventListener("touchstart", function(event) {
    event.preventDefault();
    start = new Date();
    var tId = setTimeout(function() {
        var end = new Date();
        var time = end - start;
        event.target.innerHTML = "你已经长按" + (time / 100) + "S";
        (end - start < 2000) && setTimeout(arguments.callee, 10);
    }, 10);
}, false);
btn.addEventListener("touchend", function(event) {
    event.preventDefault();
    (new Date() - start > 2000) && (console.log("长按超过两秒"));
}, false);

Answer 4

个人觉得，没有必要设定2s这么苛刻，可以和产品商量下，就是一个longtap罢了。

没有因为这么2s多写一些函数。直接用zepto的longtap属性就行了