chrome 監聽touch類事件報錯：無法被動偵聽事件preventDefault

sixleaves 發布于2019-08-22 10:43 / 1318人閱讀

摘要：先上錯誤信息一個簡單的頁面只有這么段報的一個好錯誤，真是日了狗了，一直這么寫的代碼，什么情況原來，是新版，給這個返回了，不再是清除瀏覽器默認行為了。

先上錯誤信息：

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

一個簡單的頁面只有這么段js

document.addEventListener("touchstart", function(event) {
    event.preventDefault();
}, false);

報的一個好錯誤，真是日了狗了，一直這么寫的代碼，什么情況？
原來，是新版chrome，給這個preventDefault返回了naive，不再是清除瀏覽器默認行為了。
那這怎么搞？
現在mdn上搜索一番：
event.cancelable 瀏覽器默認行為是否可以被禁用
event.defaultPrevented 瀏覽器默認行為是否已經被禁用
好像mdn上的event.preventDefault()方法還沒更新到最新
那這就可以解決問題了，如果event.cancelable=false，是什么意思？不讓開發者主動去禁用么？
但是event.defaultPrevented也是false，這個又怎么說？明明是沒有清除默認行為，卻又禁止清除默認行為！！！

好吧，我是一個渺小的開發者，我只能該自己的代碼：

document.addEventListener("touchstart", function(event) {
    // 判斷默認行為是否可以被禁用
    if (event.cancelable) {
        // 判斷默認行為是否已經被禁用
        if (!event.defaultPrevented) {
            event.preventDefault();
        }
    }
}, false);

本人資歷尚淺，無法給各大社區提這個小意見

不過，這樣一來，好像不用我們在手動清除默認行為了

云服務器 GPU云服務器 touch事件監聽事件事件監聽監聽鍵盤事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91141.html

Passive Event Listeners——讓頁面滑動更加流暢的新特性

摘要：這是因為版本以后，增加了新的事件捕獲機制就是告訴前頁面內的事件監聽器內部是否會調用函數來阻止事件的默認行為，以便瀏覽器根據這個信息更好地做出決策來優化頁面性能。 Passive Event Listeners - 被動事件監聽器在寫webapp頁面的時候，Chrome 提醒　 [Violation] Added non-passive event listener to a scro...

XanaHopper 2019-08-21 11:48 評論0 收藏0
阻止微信瀏覽器下拉滑動效果（ios11.3 橡皮筋效果）

摘要：一前言瀏覽器在移動端有一個默認觸摸滾動的效果，讓我們感觸最深的莫過于微信瀏覽器里面，下拉時自帶橡皮筋的效果。二解釋微信在端和端使用的不是同樣的瀏覽器內核版微信瀏覽器瀏覽器內核相當于使用的版微信瀏覽器相當于使用的所以下面分別使用和來分析。在升級到 ios11.3 系統后，發現之前阻止頁面滾動的代碼e.preventDefault代碼失效了。于是自己折騰了一番，找到了解決辦法，分享給大家...

cangck_X 2019-08-22 15:59 評論0 收藏0
Lighthouse的使用與Google的移動端最佳實踐

摘要：當一個按鈕沒有名字時，屏幕閱讀器會宣布按鈕。雖然每個元素的目的對于有視覺的用戶來說可能是顯而易見的，但對于依靠屏幕閱讀器的用戶來說并非如此。屏幕閱讀器使視覺障礙的用戶能夠通過將文本內容轉換為可以使用的表格如合成語音或盲文來使用您的網站。 Lighthouse是一個Google開源的自動化工具，主要用于改進網絡應用（移動端）的質量。目前測試項包括頁面性能、PWA、可訪問性（無障礙）、最佳...

ccj659 2019-08-26 11:42 評論0 收藏0