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

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

  •  
  •   LeeReamond · 276 天前 · 2729 次点击
    这是一个创建于 276 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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