chrome 监听touch类事件报错无法被动侦听事件preventDefault-文章详情-前端技术-千寻前端

先上错误信息：

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

一个简单的页面只有这么段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);

本人资历尚浅，无法给各大社区提这个小意见

不过，这样一来，好像不用我们在手动清除默认行为了

热门评论：

樱花飞落ll 2017-3-2 2:04 回复:

加上* { touch-action: none; } 这句样式就去掉了
- jsoncode 2017-6-19 10:46 回复:樱花飞落ll
  完全不一样哦，你加上这行css，页面所有事件都不执行了，上面js仅仅是为了禁止浏览器的默认行为，并不代表要禁止所有事件。
- 没屁股的狐狸 2019-7-10 8:33 回复:樱花飞落ll
  
  @jsoncode 然而并没有用。。。

Kevin______ 2017-2-10 11:17 回复:

https://zhuanlan.zhihu.com/p/...
可以看看这个呃。
- jsoncode 2017-6-19 10:53 回复:Kevin______
  这个比较详细，赞，不知道那个说touch-action: none;为什么那么多点赞的，touch-action: none;和event.preventDefault();能一样么。哎。
- 洪晓斌 2017-3-13 2:12 回复:Kevin______
  
  这文章可以。

杜草原 2017-2-6 4:17 回复:

这并不是报错，event.preventDefault()也依旧生效。
passive event listener 是chrome为了提高页面的滑动流畅度而新折腾出来的一个东东。
- jsoncode 2017-2-7 10:47 回复:杜草原
  嗯，是这样的

LikeDege 2017-2-8 4:41 回复:
这个warning还是去不掉

1003865572 2017-2-10 10:17 回复:

IScroll 因为这此更新不能用了
- 彦_LYZ 2017-6-19 2:21 回复:1003865572
  遇到同样问题，请问你怎么解决

奶油酱丶 2018-10-8 3:55 回复:
我不是很懂耶,我用了touch-action: manipulation就不影响我现有功能了,而且一直监听touchstart事件不会影响效率吗?

梵鹿 2018-11-12 10:46 回复:
elem.addEventListener(
'touchstart',
fn,
{ passive: false }
);

洪晓斌 2017-3-13 4:52 回复:

其实对于移动端使用是没有影响的吧
- Egnrig 2017-9-15 3:54 回复:洪晓斌
  
  有啊，现在有影响了 Unable to preventDefault inside passive event listener due to target being treated as passive 同样报这个错误
- jsoncode 2017-6-19 10:54 回复:洪晓斌
  是的，移动端暂时没影响

xuxhcn__喵ベ 2017-11-13 12:32 回复:
event.preventDefault();执行到这一步报错啊

hehehe 2018-1-18 10:25 回复:
你好，我也遇到了类似的问题。就是某些手机的自带浏览器打开页面，所有tap事件都不起作用。请问也是要给每个tap事件的回调函数里面加上// 判断默认行为是否可以被禁用

if (event.cancelable) {
    // 判断默认行为是否已经被禁用
    if (!event.defaultPrevented) {
        event.preventDefault();
    }
}吗？

呼啦呼啦啦啦啦 2018-3-22 10:03 回复:
我觉的是因为有的事件有默认行为。有的没有默认行为，有默认行为的event.cancelable为true，没有的为false。

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

热门评论：

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