事件监听器-禁止浏览器的默认事件_pad网页开发怎样长按禁用浏览器默认事件-优快云博客

本文链接：https://blog.youkuaiyun.com/konghouy/article/details/83047376

本文介绍如何使用PassiveListener优化JavaScript事件监听，特别是在处理touchmove等事件时，通过提前告知浏览器是否阻止默认行为，提高滚动流畅性和性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道JavaScript的很多操作都是基于事件的监听。事件监听，就是在页面上设置了很多函数的触发规则，当用户触发事件之后，执行函数。

addEventListener() 是一种添加事件的方式。它的参数：

addEventListener(type, listener, useCapture)；

type：事件类型

listener：执行函数

useCapture：是否捕获执行

在一些事件中，我们会使用e.preventDafault();禁止掉浏览器的默认事件。只让浏览器执行我们规定的函数。一般我们会这样写：

document.addEventListener("touchmove", function (e) {
    e.preventDefault();
}, false);//禁止页面滑动

问题：但是这样会带来一个问题，function执行的时候，才会去禁止浏览器的默认事件。在事件没有触发的时候，默认事件依然执行。这样有时会造成浏览器的卡顿，同时有一些默认事件无法完全禁止。

解决原理：那么我们在添加事件的时候，就明确告诉浏览器是否要禁止掉默认事件。这样在浏览器执行的时候，就一定保证事件被禁止了。

chrome51 实现了这个功能。

addEventListener(type, listener, {
capture: false,
passive: false,
once: false
})

addEventListener的第三个参数变成了一个对象。这个队形有三个参数。

capture: 表示函数是否捕获执行,
passive: 表示是否执行默认事件，true执行，false不执行
once: 是否是单次事件，如果是true，执行完事件就被销毁

ps：虽然passive明确表示了是否执行默认事件，但是函数内还是需要添加 e.preventDefault();否则无法禁止默认事件。

document.addEventListener("touchmove", function (e) {
    e.preventDefault();
}, { passive: false, capture: false });//禁止页面滑动

使用passiveListener使浏览器的滚动更加流畅。

在移动端可以禁掉浏览器左右滑动的前进和后退