h5页面fastClick.js点击报错处理

开发h5页面点击事件移动端会有300ms的延迟,于是便打算用fastClick.js解决。
页面引入fastClick.js后,执行点击事件的时候发现谷歌浏览器会报错,如下:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080查询了之后发现这是因为Chrome及其内核浏览器更新了一项新特性,那么如何解决呢?
一般现在有两种方案:

  1. 最简单的是加上*{ touch-action: none; } 不进行任何touch相关默认行为.
  2. 手动清除默认行为
document.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, {
    passive: false
});

看似第一种简单方便,可是用了之后突然发现页面不能滑动了,在浏览器中鼠标还是能正常滚动,但改成触摸模式后就不行了。在手机上也不能滑动。关于touch-action的属性值,具体查文档就行了。auto是默认值,表示手势操作什么的完全有浏览器自己决定。manipulation表示浏览器只允许进行滚动和持续缩放操作,类似双击缩放这种非标准操作就不可以。想当初,click事件在移动端有个300ms延时,就是因为避免和手机双击行为发生冲突。然而,当我们设置了touch-action:manipulation干掉了双击行为,则显然,300ms延时就不复存在,因此,html {touch-action: manipulation;}声明可以用来避免浏览器300ms延时问题。想到这,突然想到还用使用fastClick吗,直接用这个css属性不就行了。还引那么一堆东西干嘛。查了touch-action的兼容性,发现在移动端大多数还是兼容的。于是移动端以后就可以大胆的使用click事件了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值