V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vue.js
LeeReamond
V2EX  ›  Vue.js

Vue 如何同时触发两个叠在一起的 div 的点击事件?

  •  
  •   LeeReamond · 25 天前 · 1940 次点击

    如题,有两个 div,用 absolute 排版,重叠在一起,两层各自绑定了一些响应事件,想要做到点击的时候同时触发两个 div 的事件,应该怎么操作?

    百度了一下说是设置 style="pointer-events:none;" 试了之后发现,加上以后确实能穿透下层了,但是上层的点击事件直接被忽略了。有能同时触发两个的方法吗?

    29 条回复    2021-04-23 21:27:58 +08:00
    ch2
        1
    ch2   25 天前 via iPhone
    事件冒泡机制,只能被一个处理
    OHyn
        2
    OHyn   25 天前
    用 js 去触发吧,dispatchEvent 。
    ps:为啥要做的这么别扭。。。
    Blacate
        3
    Blacate   25 天前 via iPhone   ❤️ 4
    听起来像诱导用户的……
    LeeReamond
        4
    LeeReamond   25 天前
    @OHyn
    @Blacate 需求是有一个 div 做窗口,想要让 div 内点击任何地方都触发一个逻辑(让网页内其他组件全部失焦),同时 div 内还有按钮之类的,按钮同样有自己的逻辑,所以要两个都触发。如果不是双层触发实现的话,就需要给每一个按钮都多绑定一个上浮的逻辑,同时还需要处理除了按钮之外的部分,文字,背景图等等等等,工作量翻几番
    LeeReamond
        5
    LeeReamond   25 天前
    @Blacate 另外诱导用户什么的,js 都在沙箱里运行,又能做得到什么呢。。
    Kylin30
        6
    Kylin30   25 天前
    @LeeReamond 有啊,透明层,点一下出一个广告,再点一下才出真实内容,有的网站还盖 2,3 层呢。
    proxychains
        7
    proxychains   25 天前
    @Kylin30 有些盗版视频网站好多这种广告.透明的播放按钮,点了播放在新 tab 弹出广告,播放按钮才能播放.
    gouflv
        8
    gouflv   25 天前 via iPhone   ❤️ 1
    用 vue 做的开发,思路总有一些天马行空的
    Blacate
        9
    Blacate   25 天前 via iPhone
    @LeeReamond 听起来通过事件冒泡和事件代理就可以实现
    cslive
        10
    cslive   25 天前
    建议去各大小说网站学学,停掉广告插件,学会各种奇淫技巧
    xuanbg
        11
    xuanbg   25 天前
    同时是不可能同时的,交互分两步,就得点两下。
    yunyuyuan
        12
    yunyuyuan   25 天前
    自己 dispatch
    DOLLOR
        13
    DOLLOR   25 天前
    上一层监听 mousedown 事件,触发后立刻把上层设为“pointer-events:none”,
    下一层监听 mouseup 事件,触发后后撤回上层的“pointer-events:none”。
    纯口述,没试过。
    vivipure
        14
    vivipure   25 天前
    a.b 两个 div, 成为父子关系就行吧。 你点击子级节点, 父级也会触发的
    no1xsyzy
        15
    no1xsyzy   25 天前
    @LeeReamond 你直接把两个 div 嵌套起来啊
    不添加 event.stopPropagation 或者 内层 .stop 或者 外层 .self 的话会都触发啊
    https://jsfiddle.net/s93aLgyz/0/
    chenmobuys
        16
    chenmobuys   25 天前
    这是要点击广告吗
    cxe2v
        17
    cxe2v   25 天前
    都用上 vue 了还不简单,全覆盖那个的处理函数不要绑在元素上,你放在一个 computed 里也好,放在 watch 里也行,在子元素被点击的时候,更新一下这个被关注的属性,就触发了你想要触发的方法
    OHyn
        18
    OHyn   25 天前
    @Kylin30 拼多多即视感。。。。
    luogege
        19
    luogege   25 天前
    A 方法里面放 B(),这么简单的问题,咋都这么绕呢
    OHyn
        20
    OHyn   25 天前
    @no1xsyzy 按楼主的说法,其实嵌套之后啥都不用添加,在内外层分别监听 click 就行了。。。
    luogege
        21
    luogege   25 天前
    @luogege 看错了,直接父元素套子元素完事
    lychs1998
        22
    lychs1998   25 天前
    这个又不是叠在一起的 div 。按你的描述:点到按钮了执行按钮逻辑,点到按钮外的地方执行失焦逻辑。没必要做成后者覆盖前者。
    SakuraKuma
        23
    SakuraKuma   25 天前
    这, 不是用 vue 吗..
    aboveClickEvent(){xxxx; this.belowClickEvent()} // 直接显式调用不就好了.
    belowClickEvent(){xxxx;}

    除非你两 div 还是动态上下的..
    registerrr
        24
    registerrr   25 天前
    做父子层级吧?子层级作为直接被点击的元素,子层级被点击后去触发父层级的点击事件
    wednesdayco
        25
    wednesdayco   25 天前
    上个订阅者不就好了 互相通知呗
    darknoll
        26
    darknoll   25 天前
    每个 div 响应的时候把这两个 div 的事件都执行了不就完事了
    zhuweiyou
        27
    zhuweiyou   25 天前
    既然是重叠的, 上面的 DIV 被点击, 两个处理函数都调用一下就行了...
    cereschen
        28
    cereschen   25 天前
    如果你不需要处理 event 那么实现的方式太多了
    需要的话就用 dispatchEvent
    chaoFanExcellent
        29
    chaoFanExcellent   24 天前
    你执行 A,把 B 方法调用下不就行了,又不是真的要点击。
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2679 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 11:13 · PVG 19:13 · LAX 04:13 · JFK 07:13
    ♥ Do have faith in what you're doing.