Unable to preventDefault inside passive event list

魏宪会发布于2019-08-21 15:19 / 680人阅读

摘要：最近做项目经常在的控制台看到如下提示于是了一番，找到这篇文章，有了详细解释。简而言之由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过，这就导致了浏览器不能及时响应滚动，略有延迟。

最近做项目经常在 chrome 的控制台看到如下提示：

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

于是 Google 了一番，找到这篇文章，有了详细解释。Making touch scrolling fast by default

简而言之：

由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。

所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

举例：
wnidow.addEventListener("touchmove", func) 效果和下面一句一样
wnidow.addEventListener("touchmove", func, { passive: true })

这就导致了一个问题：

如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ，会被浏览器忽略掉，并不会阻止默认行为。

测试：

body {
  margin: 0;
  height: 2000px;
  background: linear-gradient(to bottom, red, green);
}

// 在 chrome56 中，照样滚动，而且控制台会有提示，blablabla
window.addEventListener("touchmove", e => e.preventDefault())

那么如何解决这个问题呢？不让控制台提示，而且 preventDefault() 有效果呢？
两个方案：
1、注册处理函数时，用如下方式，明确声明为不是被动的
window.addEventListener("touchmove", func, { passive: false })

2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
touch-action 还有很多选项，详细请参考touch-action

[注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true

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

转载请注明本文地址：https://www.ucloud.cn/yun/88154.html

一次拖拽功能引发的思考

摘要：最近做了一个物体可拖拽的需求，由于在手机上的支持性不是很好，就利用了系列事件，改变的进行位移，从而达到物体跟随手指移动的效果。但是发现了有以下提示虽然最终找到了原因是升级版本具体提给了，但是却让我陷入了思考。最近做了一个物体可拖拽的需求，由于drag-and-drop在手机上的支持性不是很好，就利用了touch系列事件，改变transform的translate进行位移，从而达到物体...

lastSeries 2019-08-26 10:14 评论0 收藏0
chrome 监听touch类事件报错：无法被动侦听事件preventDefault

摘要：先上错误信息一个简单的页面只有这么段报的一个好错误，真是日了狗了，一直这么写的代码，什么情况原来，是新版，给这个返回了，不再是清除浏览器默认行为了。先上错误信息： Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www....

sixleaves 2019-08-22 10:43 评论0 收藏0
移动端页面小bug

摘要：滑动时页面警告解决方法不支持的解决办法姓名身份证号码重点在于给设置高度和伪元素微信去掉底部返回横条问题框自动填充内容背景颜色为黄色设置文字不居中设置间距和等值即可滑动时页面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

winterdawn 2019-08-02 16:11 评论0 收藏0
移动端页面小bug

摘要：滑动时页面警告解决方法不支持的解决办法姓名身份证号码重点在于给设置高度和伪元素微信去掉底部返回横条问题框自动填充内容背景颜色为黄色设置文字不居中设置间距和等值即可滑动时页面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

youkede 2019-08-30 15:43 评论0 收藏0