【解决】移动端页面点击和滑动时警告:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

【问题】

移动端上添加了touchstart、touchmove...事件,示例如下:

document.addEventListener('touchmove', function(event) {
  event.preventDefault(); // 阻止默认事件
  ...
}, false

在滑动测试中,控制台一直发出警告信息:

 

 

 

【解决方案】

方法一:在事件触发元素上添加css属性

body {
  touch-action: none
}

 

方法二:在事件监听方法上绑定相关参数

document.addEventListener('touchmove', function(event) {
  event.preventDefault(); // 阻止默认事件
  ...
}, { passive: false })

这里要说明一下第三个参数,以前我们的写法是:

ele.addEventListener('touchmove', fn, true|false)
// true 表明事件捕获阶段执行
// false表明事件冒泡阶段执行
// 没有第三个参数的时候默认false
// 其实第三个参数还可以是对象{capture: true|false, passive: true|false, once: true|false}

 

【参考文章】

关于移动端页面点击和滑动时警告

 

posted @ 2020-03-04 18:01  WANNANANANA  阅读(484)  评论(0编辑  收藏  举报