移动端点击事件延迟问题

1、禁用缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

这一方案在 safari 上并不起作用,而且大大降低了移动端页面的可用性和可访问性。

2、使用指针事件 (IE10+)

a, button{
     -ms-touch-action: manipulation; /* IE10 */
     touch-action: manipulation; /* IE11+ */
}

允许移除特定元素或整个文档的触发延迟,而无需禁用缩放。但就目前而言,只有 Internet Explorer 实现了指针事件。

3、使用fastclick.js

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

 第一步:在页面中引入fastclick.js文件   https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js
 第二步:在js文件中添加以下代码

$(function() {    
    FastClick.attach(document.body);    
});  


      
 

猜你喜欢

转载自blog.csdn.net/xiaonuanli/article/details/87880636