V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
sybb
V2EX  ›  JavaScript

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

  •  
  •   sybb · 2020-07-13 18:24:39 +08:00 · 2649 次点击
    这是一个创建于 1594 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
    coolcoffee
        1
    coolcoffee  
       2020-07-13 18:28:50 +08:00
    1. 直接 offEventListener("click")把事件都移除。
    2. 在上面悬浮一个看不见的同尺寸元素挡着。
    momocraft
        2
    momocraft  
       2020-07-13 18:29:08 +08:00
    在上一级 capture ?
    xiangyuecn
        3
    xiangyuecn  
       2020-07-13 18:30:01 +08:00
    研究一下 addEventListener 第三个参数

    要我搞就暴力解决,干掉原来的 dom,替换成一个新的完全一样的 dom
    AlphaTr
        4
    AlphaTr  
       2020-07-13 18:57:09 +08:00   ❤️ 1
    没啥副作用的话,暴力点用 CSS 干掉 `#v2ex {pointer-events: none;}`
    VDimos
        5
    VDimos  
       2020-07-13 19:13:07 +08:00 via Android
    clone 一个元素然后 replace 掉
    Rhianu
        6
    Rhianu  
       2020-07-13 19:15:54 +08:00   ❤️ 1
    <div id='v2ex' style="pointer-events: none"></div> 就可以将该元素所有的事件失效
    maichael
        8
    maichael  
       2020-07-13 19:45:12 +08:00
    重新克隆一个元素好一点。
    zhouyg
        9
    zhouyg  
       2020-07-13 20:05:21 +08:00
    pointer-events: none 这行 css 足矣
    liuhuihao
        10
    liuhuihao  
       2020-07-14 09:29:41 +08:00
    pointer-events: none
    +1
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2160 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 01:08 · PVG 09:08 · LAX 17:08 · JFK 20:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.