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

資深大佬 : sybb 7

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(只能阻止在这个方法后边绑定的) 都没达到阻止的效果。

大佬有話說 (10)

資深大佬 : coolcoffee

1. 直接 offEventListener(“click”)把事件都移除。
2. 在上面悬浮一个看不见的同尺寸元素挡着。

資深大佬 : momocraft

在上一级 capture ?

資深大佬 : xiangyuecn

研究一下 addEventListener 第三个参数

要我搞就暴力解决，干掉原来的 dom，替换成一个新的完全一样的 dom

資深大佬 : AlphaTr

没啥副作用的话，暴力点用 CSS 干掉 `#v2ex {pointer-events: none;}`

資深大佬 : VDimos

clone 一个元素然后 replace 掉

資深大佬 : Rhianu

<div id=’v2ex’ style=”pointer-events: none”></div> 就可以将该元素所有的事件失效

資深大佬 : christin

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener

資深大佬 : maichael

重新克隆一个元素好一点。

資深大佬 : zhouyg

pointer-events: none 这行 css 足矣

資深大佬 : liuhuihao

pointer-events: none
+1