如何阻止一个 dom 节点所有的点击事件

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1599 天前的主题，其中的信息可能已经有所发展或是发生改变。

chrome 插件里涉及到阻止元素事件的问题，比如：

在插件里监听到了现在鼠标点击了一个 DIV 标签 v2ex

<div id='v2ex'></div>

这个 V2EX 可能有多个 click 事件监听，比如：

  document.getElementById('v2ex').addEventListener('click', () => {
    console.log('click 1')
  })
  document.getElementById('v2ex').addEventListener('click', (e) => {
    e.stopImmediatePropagation()
    console.log('click 2')
  })
  document.getElementById('v2ex').addEventListener('click', (e) => {
    e.stopImmediatePropagation()
    console.log('click 3')
  })

怎么让那些绑定和监听全部不执行呢？？？

注：试过 preventDefault 、stopImmediatePropagation(只能阻止在这个方法后边绑定的) 都没达到阻止的效果。

第 1 条附言 · 2020-07-15 18:01:04 +08:00

目的是在用户打开的任何页面中提取用户的操作过程(click，mouseover，change...)，所以 removeEventListener 的方法不好使；

提取数据的同时，还不能影响到页面本身的交互，所以 pointer-events: none 也不可行哦；

期望的是只在本地操作拦截这个元素的事件方法。

比如有个场景是，鼠标移动到百度主页右上角的“设置”时候，期望不出现这个"设置"的子 menu 。

10 条回复 • 2020-07-14 09:29:41 +08:00