如题,需要用户按住界面上一个按钮两秒钟然后才能执行别的操作,如何判断用户是否长按界面2s
touchstart
touchend
用这两个时间就行, start 的适合记录当前时间 new Date().getTime()
,End 的时候做时间差,大于2000 就是 2s 了.
扩展: 给 start 一个 setTimeout, 如果 end 的时候小于 2s 就 clearTimeout . 否则 setTimeout 就执行了,不会出现按下4 5秒才抬手的问题.
个人觉得,没有必要设定2s这么苛刻,可以和产品商量下,就是一个longtap罢了。
没有因为这么2s多写一些函数。直接用zepto的longtap属性就行了
示意代码:
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);
}
}
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);