根本原因:double click 双击
移动端默认双击情况下会有方法效果,当你点击一次之后,移动端无法判断你是否下一次还会继续完成双击,因此存在300 ms 延迟
有一部分浏览器,比如chrome浏览器,当你在meta头设置width=device-width时,它会自动禁止300 ms的延迟
推荐的解决方法:fastclick https://github.com/ftlabs/fastclick
原理:当检测到touchend事件后,会触发自己模拟的click事件
先测试一下touchstart和click之间的时间差:
我用的chrome
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"title>移动端动画</name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"style> *{padding:0;margin} .boxwidth100pxheight 100pxbackground-color pink} bodydiv class="box" id="box"></div> script> var box=document.getElementById("box),startTime; box.addEventListener(touchstart,function(){ startTimeDate.now();//获取当前时间 console.log(); },1)">false); box.addEventListener(click(){ console.log(); console.log(Date.now()-startTime); },1)">); html>
这个88ms的时间差延迟是可以接受的,说明chrome浏览器已经解决了这个问题
但是有部分浏览器比如安卓机上的还是会存在300ms延迟问题
解决方法:首先引入fastclick.js
<script src="fastclick.js"></script>
然后添加这段代码:
<script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded',function() { FastClick.attach(document.body); },false); } </script>
jQuery版需要用下面这段代码:
$(() {
FastClick.attach(document.body);
});
以下这几种情况是不需要使用fastclick:
1、FastClick不会对PC浏览器添加监听事件
2、Android版Chrome 32+浏览器,如果设置viewport meta的值为width=device-width,这种情况下浏览器会马上出发点击事件,不会延迟300毫秒。
>
3、所有版本的Android Chrome浏览器,如果设置viewport meta的值有user-scalable=no,浏览器也是会马上触发点击事件。
4、IE11+浏览器设置了css的属性touch-action: manipulation,它会在某些标签(a,button等)禁止双击事件,IE10的为-ms-touch-action: manipulation
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。