当前位置: 代码迷 >> 综合 >> 移动端解决click 300ms 延迟问题---fastclick
  详细解决方案

移动端解决click 300ms 延迟问题---fastclick

热度:60   发布时间:2024-02-06 10:44:58.0

 问题产生的原因:

300ms延迟出现的原因是double  click双击,因为当点击一次屏幕的时候,浏览器不知道用户是单击还是想要双击,所以就会延迟判断,看看300ms内是否有第二次点击

如果有两次点击的情况,浏览器就会判定为双击放大,如果在300ms内没有点击第二次,就会判定为一次点击事件,这时候才会触发click事件

这样说可能有些有些绕口,但是这个问题也是比较常见的

解决办法:

第一:在浏览器加上width = device - width 

<meta name="viewport" content="width=device-width">

 大部分浏览器都支持这种写法,会假设不会出现双击放大的情况,既然不会出现双击放大,就没有了延迟判断,

但是这种方法存在一些小bug

所以我支持第二种方法,可以满足绝大多数的情况

第二:在github官网找到fastclick并下载      fastclick下载

并在JavaScript中写出下列代码

<script src="fastclick.js"></script><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}
</script>

 

 

  相关解决方案