设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive

Posted 2020-12-19 li320212035

问题

当使用fastClick.js设置点击事件时,控制台报错:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
意思是 无法被动监听事件中的默认事件.
preventDefault就是阻止事件的默认事件,如果设置了preventDefault,则form表单不会提交,a链接不会跳转

原因产生

AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored)..
If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.
This is behind a flag starting in Chrome 54, and enabled by default in Chrome 56. See https://developers.google.com/web/updates/2017/01/scrolling-intervention

AddEventListenerOptions默认为被动为false。通过此更改，添加到文档中的touchstart和touchmove侦听器将默认为passive:true（以便忽略对preventDefault的调用）。。
如果AddEventListenerOptions中显式提供了该值，则它将继续具有页面指定的值。
这在Chrome 54开始的标志后面，在Chrome 56中默认启用。参见https://developers.google.com/web/updates/2017/01/scrolling-intervention

解决方案

1. 添加监听事件选项{passive: false}
   window.addEventListener(‘touch事件‘,[callback],{passive: false});
2. 使用css属性
   touch-action: none; 这样任何触摸事件都不会产生默认行为,而且touch事件还会触发