原文链接:https://blog.csdn.net/fesfsefgs/article/details/107852438
主旨:
- addEventListener第三个参数除了可以是一个boolean类型外,还可以是一个options配置对象!!
addEventListener(type, listener, useCapture);
addEventListener(type, listener, options);
/*
{
capture: Boolean, // 表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发
once: Boolean, // 表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。
passive: Boolean, // 设置为true时,表示`listener`永远不会调用`preventDefault()`。如果`listener`仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告
}
*/
- 添加passive参数后,touchmove事件不会阻塞页面的滚动(同样适用于鼠标的滚轮事件)
你可以这么理解: 当你触摸滑动页面时,页面应该跟随手指一起滚动。而此时你绑定了一个 touchmove 事件,你的事件大概执行 200 毫秒。这时浏览器就犯迷糊了:如果你在事件绑定函数中调用了 preventDefault,那么页面就不应该滚动,如果你没有调用 preventDefault,页面就需要滚动。但是你到底调用了还是没有调用,浏览器不知道。只能先执行你的函数,等 200 毫秒后,绑定事件执行完了,浏览器才知道,“哦,原来你没有阻止默认行为,好的,我马上滚”。此时,页面开始滚。
所以设置{ passive: true }的意义是
告诉浏览器立马滚动,不用等200毫秒后确认了,我根本就没有preventDefault,此时你滚动起来再也没有延迟感了,舒服了