移动端点击300ms延迟的解决方法

发表于 | 更新于 | 阅读次数 1
移动端点击300ms延迟的解决方法

meta标签法：禁用缩放

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

user-scalable=no表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

meta标签法：更改默认的视口宽度

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

width=device-width表明是一个响应式的网站，够识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。

css方法

1
touch-action: none;

IE10+支持，chrome等赞不支持

FastClick插件方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<script>
/*js用法：*/
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
}


/*jquery用法：*/
$(function() {
   FastClick.attach(document.body);
});


/*zepto用法：*/
if ('addEventListener' in document) {
  window.Zepto(document).on('DOMContentLoaded', function () {
    window.FastClick.attach(document.body)
  })
}
</script>

快速模拟一个click，并禁止掉原有的click

总结

1、2、3方法均不好用，建议使用FastClick插件