单击和长按
手势 | 描述 |
---|---|
tap | 手指触摸后马上离开 |
longpress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 |
longtap | 手指触摸后,超过350ms再离开(推荐使用longpress事件代替) |
ps:longtap 是先触发长按,后触发单击
事件 | 触发顺序 |
---|---|
单击 | touchstart → touchend → tap |
双击 | touchstart → touchend → tap → touchstart → touchend → tap |
长按 | touchstart → longtap → touchend → tap |
我们也可以根据触摸时常需要自行区分长按和单击
bindtouchstart='touchStart'
bindtouchend='touchEnd'
单击和双击
双击相当于在较短的时间内发生了两次单击,因此双击和长按的区分参考单击和长按的区分,下不赘述
以函数名称作为参数使用setTimeout
分享一个我做视频播放器时候的方法,主要想法是单击事件延迟发生,如果延迟期间进行了鼠标点击,则视作双击,执行双击事件,同时鼠标点击次数清零。
function clickEvent() {
click_number++;
console.log('click_number=' + click_number);
var val = setTimeout("call();", 250);
if(click_number == 2) {
clearTimeout(val);
}
}
function call() {
if(click_number == 1) {
console.log('$video click:点击切换播放状态');
changePlayState();
click_number = 0;
} else if(click_number == 2) {
console.log('$video dblclick:点击切换全屏');
$fullScreen.click();
click_number = 0;
}
}
匿名内部类作为参数使用setTimeout函数
function check_tap(e){
tap_num++;
var val = setTimeout(function(){
if (tap_num == 1) {
console.log('单击------');
setPoint(e,1)
tap_num = 0;
} else if (tap_num == 2) {
console.log('双击------');
setPoint(e,2)
tap_num = 0;
}
},250)
if(tap_num==2){
clearTimeout(val)
}
}
另外
/**
* 判断手势
*/
function check_tap(e){
tap_num++;
var val = setTimeout(call,250)
if(tap_num==2){
clearTimeout(val)
}
}
/**
* tapCount timeout call
*/
function call(){
if (tap_num == 1) {
console.log('单击------');
tap_num = 0;
} else if (tap_num==2) {
console.log('双击------');
tap_num = 0;
}
}
在setTimeout函数中,第一个参数是被调用函数的名字,不能加括号,加括号就会立即执行,从而没办法发挥定时器的作用,如果被调用的函数带参数,写在setTimeout函数的第三个参数位置。
setTimeout(call,250,call的第1个参数,call的第2个参数······)
如果被调用函数加括号,就会报如下错误:
setTimeout expects a function as first argument but got undefined.;at pages/home/home page canvasTap function TypeError: setTimeout expects a function as first argument but got undefined.