移动端300ms特殊处理

Posted zhaoxinran997

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端300ms特殊处理相关的知识,希望对你有一定的参考价值。

移动端的特殊处理

300ms延迟的解决方法

  • 300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放,顾名思义,即用手指在屏幕上快速点击两次,ios 自带的 Safari 浏览器会将网页缩放至原始比例。

1.fastclick

  • 解决移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。
  • fastclick.js的原理是:FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉。
使用方法
1. 安装:
命令行:npm install fastclick

CDN:<script crossorigin="anonymous" integrity="sha384-qSrEYLMHSuUya7HioxgwmVKxoqyVbT2Xmu87cJyVwFm1oq4M6Tz5lcdiFrOrS93l" src="https://lib.baomitu.com/fastclick/1.0.6/fastclick.min.js"></script>
2.使用fastclick
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

2.meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
3. touch-action
/* E11+浏览器设置了css的属性touch-action: manipulation,它会在某些标签(a,button等)禁止双击事件 */
*{touch-action: manipulation}

以上是关于移动端300ms特殊处理的主要内容,如果未能解决你的问题,请参考以下文章

移动端点击300ms延迟

解决click事件300ms延迟

fastclick

移动端延迟300ms的原因以及解决方案

解决click事件在移动端操作延迟300ms问题和点击时穿透问题

移动端事件