根本原因：double click 双击
移动端默认双击情况下会有方法效果，当你点击一次之后，移动端无法判断你是否下一次还会继续完成双击，因此存在300 ms 延迟
有一部分浏览器，比如chrome浏览器，当你在meta头设置width=device-width时，它会自动禁止300 ms的延迟
推荐的解决方法：fastclick
原理：当检测到touchend事件后，会触发自己模拟的click事件
先测试一下touchstart和click之间的时间差：
我用的chrome
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>移动端动画</title> <meta name="viewport" content="width=device-width, initial-scale=1, m顶岗实习报告aximum-scale=1, minimum-scale=1, ur-scalable=no"&g铅的化学符号t; <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;} </style></head><body> <div class="box" id="box"></div> <script> var box=document.getelementbyid("box"), starttime=0; box.addeventlistener("touchstart",function(){ starttime=date.now();//获取当前时间 console.log("touchstart"); },fal); box.addeventlistener("click",function(){ console.log("click"); console.log(date.now()-starttime); },fal); </script></body></html>这个88ms的时间差延迟是可以接受的，说明chrome浏览器已经解决了这个问题
但是有部分浏览器比如安卓机上的还是会存在300ms延迟问题
解决方法：首先引入fastclick.js
<script src="fastclick.js"></script>
然后添加这段代码：
<script> if ('addeventlistener' in document) { document.addeventlistener('引用的意思domcontentloaded', function() { fastclick.谢的文言文意思attach(document.body); }四级答案2013, fal); } </script>jquery版需要用下面这段代码：
$(function() { fastclick.attach(document.body);});以下这几种情况是不需要使用fastclick：
1、fastclick不会对pc浏览器添加监听事件
2、android版chrome 32+浏览器，如果设置viewport meta的值为width=device-width，这种情况下浏览器会马上出发点击事件，不会延迟300毫秒。
<meta name="viewport" content="width=device-width, initial-scale=1">
3、所有版本的android chrome浏览器，如果设置viewport meta的值有ur-scalable=no，浏览器也是会马上触发点击事件。
4、ie11+浏览器设置了css的属性touch-action: manipulation，它会在某些标签（a，button等）禁止双击事件，ie10的为-ms-touch-action: manipulation
本文发布于:2023-04-07 08:57:59，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/771ba485ba5f0fcd1d6b1d9052250a01.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：移动端常见问题（click 300ms延迟）.doc
本文 PDF 下载地址：移动端常见问题（click 300ms延迟）.pdf
| 留言与评论（共有 0 条评论） |
