使用fastClick.js所产生的一些问题

Posted 2020-12-25 倚笑乘风

开发h5活动页时想到移动端会有300ms的延迟，于是便打算用fastClick.js解决。

页面引入fastClick.js后，滑动H5页面的时候发现谷歌浏览器会报错,如下：

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/...

查询了之后发现这是因为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事件了。