移动端click事件延迟300ms问题(web页面点击没问题,手机端单击变成双击效果)

移动端300ms点击延迟和点击穿透问题详细原理参考https://www.jianshu.com/p/6e2b68a93c88(此文章内方法未测试,只参考原理)

具体解决方案如下:(亲测有效)

操作系统ubuntu18.4 64位

因为历史原因,移动端点击事件会有300ms延迟,来判断用户是连续双击缩放还是点击跳转。即如果300ms内连续点击两次,则会理解为对页面进行缩放操作(当然前提是移动端页面设置为可缩放的);在一次点击之后如果300ms内没有再次发生点击事件,那么系统会默认为跳转事件,点击300ms后进行跳转。所以移动端正常跳转页面会有300ms延迟问题。

使用fastclick.js可以屏蔽移动端的300ms问题。引入fastclick.js插件然后添加下边代码。

https://github.com/ftlabs/fastclick

if ('addEventListener' in document) {  
    document.addEventListener('DOMContentLoaded', function() {  
        FastClick.attach(document.body);  
    }, false);  
} 

如果同时使用了jquery

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

如果使用了模块加载工具

var attachFastClick = require('fastclick');
attachFastClick(document.body);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值