原生js如何判断移动端的tap,dbltap,longtap?点击,双击,长按的识别

在移动端,可以根据touchStart与touchEnd的间隔来判断是点击,双击,还是长按;

主要的代码:

let t=0, lastTap=0;

oBtn.addEventListener('touchstart',function(){

t=Date.now();

},false);

oBtn.addEventListener('touchend',function(){

if(Date.now()-t<=700){

console.log('tap');

if(Date.now()-t<=700){

    console.log('tap');

if(Date.now()-lastTap<=300){

    console.log('dbltap');

}

lastTap=Date.now();

}else{

console.log('long tap');

}

lastTap=Date.now();

}

},false);

通过时间差来判断,当然为什么是700, 300,是我的经验值,在开发中觉得这二个值的界定还是挺合适的。一次双击同时等于二次单击。当然手机上面双击的交互是很少的,长按还是挺有实用性的,比如长按删除。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • zepto的tap事件点透问题分析: 一、点透是什么 你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮...
    夏沉阅读 2,292评论 2 1
  • 一、设备事件 移动端事件都要在head里面设置: 获取移动端设备的尺寸:screen.width,screen.h...
    空谷悠阅读 251评论 2 3
  • js简介 Js是一种基于事件和对象驱动的解释性、松散性的语言。 一切皆对象 javascript 布兰登艾奇 ...
    塔库纳玛哈哈阅读 1,233评论 0 2
  • 每当有人问我为什么还没有恋爱时,我都在心里说,因为我在等那个对的人,也在等自己变得足够优秀。 上大学之后,遇到了一...
    木木青南阅读 353评论 0 3
  • 既被纠结了心跳,又被掌控了微笑,怎么样都是输了吧。就这样吧,能在一起相亲相爱多久就多久吧,永远永远都不要离开,我是...
    忧郁的漁阅读 219评论 0 0