使用fastClick.js所產(chǎn)生的一些問題

開發(fā)h5活動頁時想到移動端會有300ms的延遲，于是便打算用fastClick.js解決。

頁面引入fastClick.js后，滑動H5頁面的時候發(fā)現(xiàn)谷歌瀏覽器會報錯,如下：

Unable to preventDefault inside passive event listener due to target being treated

查詢了之后發(fā)現(xiàn)這是因為Chrome及其內(nèi)核瀏覽器更新了一項新特性，原先只會報黃色等級的錯誤，現(xiàn)在升到紅色了。那么如何解決呢？

一般現(xiàn)在有兩種方案：

最簡單的是加上*{ touch-action: none; } 不進行任何touch相關默認行為.
手動清除默認行為

document.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, {
    passive: false
});

看似第一種簡單方便，可是用了之后突然發(fā)現(xiàn)頁面不能滑動了，在瀏覽器中鼠標還是能正常滾動，但改成觸摸模式后就不行了。在手機上也不能滑動。關于touch-action的屬性值，具體查文檔就行了。auto是默認值，表示手勢操作什么的完全有瀏覽器自己決定。manipulation表示瀏覽器只允許進行滾動和持續(xù)縮放操作，類似雙擊縮放這種非標準操作就不可以。想當初，click事件在移動端有個300ms延時，就是因為避免和手機雙擊行為發(fā)生沖突。然而，當我們設置了touch-action:manipulation干掉了雙擊行為，則顯然，300ms延時就不復存在，因此，html {touch-action: manipulation;}聲明可以用來避免瀏覽器300ms延時問題。想到這，突然想到還用使用fastClick嗎，直接用這個css屬性不就行了。還引那么一堆東西干嘛。查了touch-action的兼容性，發(fā)現(xiàn)在移動端大多數(shù)還是兼容的。于是移動端以后就可以大膽的使用click事件了。

轉:https://www.cnblogs.com/dxzg/p/9378334.html

https://blog.csdn.net/iChangebaobao/article/details/95351586

總結

以上是生活随笔為你收集整理的引用fastclick.js或使用触屏监听 滑动屏幕报错：解决[Intervention] Unable to preventDefault inside passive event listener的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。