解决方案
1、禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
2、利用touch事件自己封装这个事件解决300ms延迟
原理:当我们手指触摸屏幕,记录当前触摸时间
当我们手指离开屏幕,用离开的时间减去触摸的时间
如果时间小于150ms,并且没有滑动过屏幕,那么我们就定义为点击
代码如下:
function tap (obj,callback){
var isMove = false; //只要不移动手指,这里永远是false
var startTime = 0; //记录触摸时候的时间变量
obj.addEventListener('touchstart',function(e){
startTime = Date.now(); //记录触摸时间
});
obj.addEventListener('touchmove',function(e){
isMove = true; //看看是否有滑动,有滑动算拖拽,不算点击
});
obj.addEventListener('touchend',function(e){
if(!isMove && (Date.now() - startTime) < 150){ //如果手指触摸和离开时间小于150ms算点击
callback && callback(); //执行回调函数
}
isMove = false; //取反,重置
startTime = 0;
});
}
tap(div,function(){//执行代码});
3、使用插件。fastclick插件解决300ms延迟
什么是插件:js插件是js文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件
移动端要求的是快速开发,所以我们经常会借助于一些插件来帮助完成插件
之前写的动画函数animate就算是一个最简单的插件
GitHub官网地址:https://gitthub.com/ftlabs/fastclick。获取解决点击延迟的插件
进去之后点击lib文件,再复制里面的js代码,再回来自己新建一个js文件,再粘贴过来就可以了
4
5
6
7
8
9
10