chrome 监听touch类事件报错：无法被动侦听事件preventDefault

sixleaves 发布于2019-08-22 10:43 / 1260人阅读

摘要：先上错误信息一个简单的页面只有这么段报的一个好错误，真是日了狗了，一直这么写的代码，什么情况原来，是新版，给这个返回了，不再是清除浏览器默认行为了。

先上错误信息：

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事件监听事件事件监听监听键盘事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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