解决Unable to preventDefault inside passive event listener invocation.报错问题

4,447 阅读1分钟

错误场景:使用swiper插件进行轮播图时报错

错误原因: 1.使用监听事件时候,第三个参数配置了passive为true(说明指定了这个监听为一个被动监听)

window.addEventListener("touchmove", handler, { passive: true });

2.以上被动监听的handler中调用了

  function handler() {
     //阻止默认事件,如点击<a>标签阻止其默认跳转事件
      event.preventDefault();

     //其他逻辑...
  }

以上两项同时成立就会报错

解决方法:查了好多方法,例如:

1、声明事件监听的时候设置为主动事件监听:

window.addEventListener(‘touchmove’, handler, { passive: false});

2、设置监听事件绑定的dom的CSS为:

touch-action:none;

但是这两个方法没有解决我的问题,使用以下方法成功解决:

1、全局样式去掉

* { touch-action: pan-y; }

2.卸载default-passive-events插件

npm uninstall default-passive-events