以前小言遇到问题都是以解决为目标,毕竟公司也是想让你快速解决问题。至于你是否弄懂了这个问题没人说你,但是想要提高自己还是要知道问题的根源和原理,那么一起看下这个问题是原因和如何解决的:
字面的意思翻译过来是:由于目标被视为被动事件监听器,无法在被动事件监听器中阻止default
意思直接告诉我们在事件监听器内无法阻止 default
可能还是有些模糊,综合分析一下吧。要知道这里报错的default是什么,点击报错的行数可以知道是preventDefault(),这个是阻止默认事件。意思就是浏览器在事件监听器内无法阻止默认事件,所以你添加的阻止默认事件是不符合浏览器解析语法的所以报错提醒。
其实到这里已经很明确了,浏览器不识别这一套写法,那就是写法错了,语法错误。怎么回事?以前这么写过啊,翻下资料才知道浏览器从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() , e.preventDefault() ,会被浏览器忽略掉,并不会阻止默认行为。所以我们应该设置事件监听内passive:false,这样可以直接告诉浏览器这个监听事件不遵循默认事件执行:
elem.addEventListener(
'touchstart',
fn,
{passive:false}
);
给监听器加个passive模式
passive监听器模式:
由于 touchstart 事件对象的 cancelable 属性为 true,也就是说它的默认行为可以被监听器通过 preventDefault() 方法阻止,那它的默认行为是什么呢,通常来说就是滚动当前页面(还可能是缩放页面),如果它的默认行为被阻止了,页面就必须静止不动。但浏览器无法预先知道一个监听器会不会调用 preventDefault(),它能做的只有等监听器执行完后再去执行默认行为,而监听器执行是要耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。视频里也说了,即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。
80% 的滚动事件监听器是不会阻止默认行为的,也就是说大部分情况下,浏览器是白等了。所以,passive 监听器诞生了,passive 的意思是“顺从的”,表示它不会对事件的默认行为说 no,浏览器知道了一个监听器是 passive 的,它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。