移动端300ms点击延迟和点击穿透问题

2021-07-10 11:01:56 阅读：210 来源： 互联网

1 问题

移动端浏览器点击事件通常有300ms的延时，随着用户体验要求增高，300ms的点击延时越来越难以忍受。

2 原因

因为手机屏幕小，所有做了双击缩放，手机浏览器为了判断用户是单击还是双击就添加了300ms的延时处理。

3 解决办法(建议用)

3.1 禁用缩放

HTML文档头部包含如下meta标签

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

3.2 更改默认的视口宽度

移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度，而是要比设备浏览器视窗宽度大，通常是980px。我们可以通过以下标签来设置视口宽度为设备宽度。

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

3.3 CSS touch-action

touch-action: none

3.4 引入fastclick方法 https://github.com/ftlabs/fastclick

3.4.1 原理

该方法在检测到touchend事件后，会触发自己模拟的click事件

3.4.2 引用和调用

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

4 补充

现在浏览器厂商已经做了处理，300ms已缩减至88ms，后续还会更少

标签：浏览器,300ms,穿透,点击,视口,3.4,宽度,document
来源： https://www.cnblogs.com/xihailong/p/14993362.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9