passive event listener

今天在編寫移動端app的時候，一個報錯引起了我的注意，報錯如下：

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

因為自己以前也沒有見過這個錯誤，是以百度了下，這個特性是從Chrome 51 開始的，旨在提升頁面的流暢度，具體的解釋如下（摘自SegmentFault）:

當你觸摸滑動頁面時，頁面應該跟随手指一起滾動。如果你綁定了一個觸摸事件（大概執行 200 毫秒），浏覽器就犯迷糊了：如果你在事件綁定函數中調用了 preventDefault，那麼頁面就不應該滾動；但是浏覽器一開始不知道你有沒有調用，隻能先執行你的函數，等 200 毫秒後，浏覽器才知道，“哦，原來你沒有阻止預設行為，好的我馬上滾”。此時，頁面開始滾。 經統計，80% 左右的觸摸事件都沒有被 preventDefault 阻止，這些等待的時間都被浪費掉了。使用 Passive Event Listeners，開發者能夠提前告訴浏覽器：“我不調用 preventDefault 函數來阻止事件預設行為”，那麼浏覽器就無需等待事件執行完成，而是直接執行預設行為（滾動）。

在這裡我們就有必要來了解一下addEventListener方法，該方法接收三個參數，window.addEventListener(type, fn, { passive: false })，type表示監聽事件類型的字元串，fn作為事件調用的函數，第三個參數預設為false，表示浏覽器檢測使用的preventDefault。

從passive event listener 被引進Chrome開始，我們就可以通過給addEventListener 設定第三個參數{passive：true}來避免浏覽器對prevent Default 的檢測，進而使滑動顯得比較流暢，當我們給addEventListener 設定了{passive: true}時，這個監聽器也就被稱為passive event listener。

解決方案：

了解了出現這個問題的原理，我們就來說說解決問題的方案：

1、設定全局css樣式

*{
	//當觸控事件發生在元素上時，不進行任何操作
	touch-action: none;
 }
           

2、使用JS的時間監聽方法來解決

window.addEventListener('type',fn,{passive: true});
           

總結：

其實這個問題不會造成頁面的崩潰，但是它的的确确的影響了性能的優化，是以來記錄下自己的解決方法。