事件监听查看、监听器删除方法

news2024/9/24 19:17:21

前言

最近在开发过程中遇上了不知在哪加入的点击事件,导致页面跳转发生问题,需要找到该点击事件并将其取消掉。以下就是在完成该目标过程中使用、尝试的方法。

1、事件查看

  1. 使用网页开发者工具(F12)选取想查看的元素
  2. 找到工具中的事件侦听器
  3. 选择要查看的事件触发方式,在其中有多个事件,可以点击旁边的删除按键(垃圾桶),以此找到需要删除的目标事件
    在这里插入图片描述

2、删除监听

情况1:通过上述查看操作找到对应的事件加入方法,事件采用addEventListener方法加入,知道事件加入的参数。
解决:采用removeEventListener取消事件。

button.addEventListener('click', handleClick);

button.removeEventListener('click', handleClick);

情况2:不知道加入事件的方法名称。
解决:采取删除匿名监听器的方式。

button.addEventListener('click', function() {
    // 操作
});

// 移除事件监听器
button.removeEventListener('click', function() {
  // 操作
}

加入匿名监听器如上,而后便是移除。

情况3:删除所有该dom元素的事件监听器。
解决:克隆、替换节点。

button.parentNode.replaceChild(button.cloneNode(true), button);
或者
button.replaceWith(button.cloneNode(true));

如此替换后通过 addEventListener附加的任何监听器都不会被保留。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2070718.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

03_React 收集表单数据和 组件生命周期

React 收集表单数据和 组件生命周期 一、收集表单数据1、例子1.1 需求:定义一个包含表单的组件,输入用户名密码后,点击登录提示输入信息 2、理解:包含表单的组件分类2.1 受控组件2.2 非受控组件 二、高阶函数\_函数柯里化1、复习-…

MATLAB 手动实现点云投影滤波器 (76)

点云投影到邻近的精确拟合平面,减少噪声点,此为投影滤波器 MATLAB 手动实现点云投影滤波器(76) 一、投影滤波器简介二、实现步骤二、算法实现1.代码2.效果这里用到的投影方法和平面拟合方法以及生成平面方法都在以往文章有所实现,有兴趣可参考: MATLAB点云处理总目录 一…

Paimon Flink本地读取数据报错

1.idea本地读取paimon 用idea在本地读取paimon的表时需要添加的依赖除了官网提出的和hadoop相关的,paimon-flink之类相关的除外还需要其他额外依赖 import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.tabl…

大模型从入门到精通——词向量及知识库介绍

词向量及知识库介绍 1.词向量 1.1 什么是词向量 词向量是一种将单词表示为实数向量的方式。每个单词通过一个高维向量来表示,向量的每一维都是一个实数,这些向量通常位于一个高维空间中。词向量的目标是将语义相似的单词映射到相邻的向量空间中&#…

【STM32 HAL】多串口printf重定向

【STM32 HAL】多串口printf重定向 前言单串口printf重定向原理实现CubeMX配置Keil5配置 多串口printf重定向 前言 在近期项目中,作者需要 STM32 同时向上位机和手机发送数据,传统的 printf 重定向只能输出到一个串口。本文介绍如何实现 printf 同时输出…

回归预测|基于北方苍鹰优化混合核极限学习机的数据预测Matlab程序NGO-HKELM 多特征输入单输出

回归预测|基于北方苍鹰优化混合核极限学习机的数据预测Matlab程序NGO-HKELM 多特征输入单输出 文章目录 前言回归预测|基于北方苍鹰优化混合核极限学习机的数据预测Matlab程序NGO-HKELM 多特征输入单输出 一、NGO-HKELM 模型1. NGO(北方苍鹰优化算法)2. …

DRF——pagination分页模块

文章目录 分页继承APIView类用法1.PageNumberPagination2.LimitOffsetPagination3.CursorPagination 继承GenericAPIView派生类用法1.PageNumberPagination2.LimitOffsetPagination3.CursorPagination 分页 在查看数据列表的API中,如果 数据量 比较大,肯…

RSA非对称性加密02: 加密redis的连接密码(下)

全文目录,一步到位 1.前言简介1.1 专栏传送门1.1.2 上文传送门 2. 使用方式2.1 使用druid自带的RSA加密工具2.1.1 引入druid依赖2.1.2 原yml配置(对比使用)2.1.2 新yml配置 2.2 springboot的redis配置类2.2.1 例如在RedisConfig中2.2.2 设置序列化与反序列化代码示例如下: 2.3 …

初始redis:Zset有序集合

Set作为集合,有两个特点:唯一且无序。 Zset是有序集合,在保证唯一的情况下,是根据什么来排序的呢?排序的规则是什么? Zset中的member引入了一个属性,分数(score)&#…

写SCI能用上的AI论文写作工具!码住!

01 Quillbot 提供改写、语法检查、抄袭检测、摘要生成、引文生成等功能。它可以在各种喜欢的网站上使用,帮助用户轻松提高写作效率和质量。 02梅子AI论文 1智能AI论文神器-查重率10%左右-参考文献致谢模板查重报告一键打包 无限免费生成千字论文大纲-在线快速生成…

智慧园区可视化:智能管理与高效运营的未来

图扑 GIS 智慧园区可视化系统整合地理信息和数据分析,实现全方位智能管理,优化资源调度,提高运营效率,保障园区安全和用户满意度。

数据结构【链试结构二叉树】

🌟个人主页:落叶 目录 ​编辑 实现链式结构⼆叉树 前中后序遍历: 遍历规则 代码实现 前序遍历: 中序遍历: 后序遍历: 图解遍历: 函数递归栈帧图: 结点个数以及高度等 【⼆…

【生日视频制作】教师节中秋节国庆节奔驰大G汽车车身AE模板修改文字软件生成器教程特效素材【AE模板】

奔驰大G汽车身生日视频制作教程AE模板修改字软件生成器素材 怎么如何做的【生日视频制作】教师节中秋节国庆节奔驰大G汽车车身AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 安装AE软件下载AE模板把AE模板导入AE软件修改图片或文字渲染出视频…

iOS工程:获取手机相册权限,iOS原生系统弹窗, Privacy隐私政策选择,如何添加系统弹出并修改描述文字

【iOS工程】获取手机相册权限,iOS原生系统弹窗, Privacy隐私政策选择,如何添加系统弹出并修改描述文字 设备/引擎:Mac(11.6)/Mac Mini 开发工具:Xcode(15.0.1) 开发需求&#xff…

maven Tomcat插件安装 运行web项目 (3)

1.maven工程目录结构 main是用来写我们程序 test是用来测试 java是源程序 resource是配置 maven项目构建命令 2.配置maven 创建Maven工程 这里的项目名称可以随便取 进来后改成自己想要的jdk

天津市2024年成人高考报名须知

🚧天津市2024年成人高考报名须知 🌫2024年天津市成人高校招生考试报名。符合天津市报名条件的在职从人员和社会其他人员,可报名参加全国各类成人高等学校招生统一考试。考生须在规定时间完成报名,逾期不再补报。 🌫网上…

微服务事务管理

1.分布式事务问题 1.1.本地事务 本地事务,也就是传统的单机事务,在传统数据库事务中,必须要满⾜四个原则: 1.2.分布式事务 分布式事务,就是指不是在单个服务或单个数据库架构下,产⽣的事务,例…

使用itextpdf5.x将网页转为PDF,并添页眉页脚页码

一、用到的Maven依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.13.3</version></dependency><!-- 中文字体支持 --><dependency><groupId>com.itextpdf…

Gameplay Ability System(通过表配置不同等级的伤害)

一、创建配置表 1、创建Excel表格&#xff0c;输入数据&#xff0c;表示1级的普攻伤害为5&#xff1b;2级的普攻伤害为15。 2、另存为.csv格式文件。 3、当然也可以通过记事本直接写成下图这样。 二、导入UE5处理 1、导入为CurveTable的稳定格式&#xff0c;命名为CT_MeleeA…

探索厦门凯酷全科技有限公司抖音小店的实用魅力

在数字化浪潮汹涌的今天&#xff0c;电商平台如雨后春笋般涌现&#xff0c;而抖音作为短视频与电商融合的佼佼者&#xff0c;更是为众多企业开辟了新的营销与销售渠道。厦门凯酷全科技有限公司&#xff0c;作为这股潮流中的一股清流&#xff0c;凭借其独特的产品定位与创新的营…