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

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

頁面引入fastClick.js后，滑動(dòng)H5頁面的時(shí)候發(fā)現(xiàn)谷歌瀏覽器會(huì)報(bào)錯(cuò),如下：

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

查詢了之后發(fā)現(xiàn)這是因?yàn)镃hrome及其內(nèi)核瀏覽器更新了一項(xiàng)新特性，原先只會(huì)報(bào)黃色等級(jí)的錯(cuò)誤，現(xiàn)在升到紅色了。那么如何解決呢？

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

最簡(jiǎn)單的是加上*{ touch-action: none; } 不進(jìn)行任何touch相關(guān)默認(rèn)行為.
手動(dòng)清除默認(rèn)行為

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

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

轉(zhuǎn):https://www.cnblogs.com/dxzg/p/9378334.html

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

總結(jié)

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

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