前言
最近在开发过程中遇上了不知在哪加入的点击事件,导致页面跳转发生问题,需要找到该点击事件并将其取消掉。以下就是在完成该目标过程中使用、尝试的方法。
1、事件查看
- 使用网页开发者工具(F12)选取想查看的元素
- 找到工具中的事件侦听器
- 选择要查看的事件触发方式,在其中有多个事件,可以点击旁边的删除按键(垃圾桶),以此找到需要删除的目标事件
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
附加的任何监听器都不会被保留。