事件监听器-禁止浏览器的默认事件

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

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

一、引入

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

二、内容

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

addEventListener(type, listener, useCapture);

type:事件类型

listener:执行函数

useCapture:是否捕获执行

三、passiveListener

在一些事件中,我们会使用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使浏览器的滚动更加流畅。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值