引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener
使用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)容,希望文章能夠幫你解決所遇到的問題。