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

[LeeReamond]

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

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

[ch2]

事件冒泡机制，只能被一个处理

[OHyn]

用 js 去触发吧，dispatchEvent 。
ps：为啥要做的这么别扭。。。

[Blacate]

听起来像诱导用户的……

[LeeReamond]

@OHyn
@Blacate 需求是有一个 div 做窗口，想要让 div 内点击任何地方都触发一个逻辑（让网页内其他组件全部失焦），同时 div 内还有按钮之类的，按钮同样有自己的逻辑，所以要两个都触发。如果不是双层触发实现的话，就需要给每一个按钮都多绑定一个上浮的逻辑，同时还需要处理除了按钮之外的部分，文字，背景图等等等等，工作量翻几番

[LeeReamond]

@Blacate 另外诱导用户什么的，js 都在沙箱里运行，又能做得到什么呢。。

[Kylin30]

@LeeReamond 有啊，透明层，点一下出一个广告，再点一下才出真实内容，有的网站还盖 2,3 层呢。

[proxychains]

@Kylin30 有些盗版视频网站好多这种广告.透明的播放按钮,点了播放在新 tab 弹出广告,播放按钮才能播放.

[gouflv]

用 vue 做的开发，思路总有一些天马行空的

[Blacate]

@LeeReamond 听起来通过事件冒泡和事件代理就可以实现

[cslive]

建议去各大小说网站学学，停掉广告插件，学会各种奇淫技巧

[xuanbg]

同时是不可能同时的，交互分两步，就得点两下。

[yunyuyuan]

自己 dispatch

[DOLLOR]

上一层监听 mousedown 事件，触发后立刻把上层设为“pointer-events:none”，
下一层监听 mouseup 事件，触发后后撤回上层的“pointer-events:none”。
纯口述，没试过。

[vivipure]

a.b 两个 div, 成为父子关系就行吧。 你点击子级节点， 父级也会触发的

[no1xsyzy]

@LeeReamond 你直接把两个 div 嵌套起来啊
不添加 event.stopPropagation 或者 内层 .stop 或者 外层 .self 的话会都触发啊
https://jsfiddle.net/s93aLgyz/0/

[chenmobuys]

这是要点击广告吗

[cxe2v]

都用上 vue 了还不简单，全覆盖那个的处理函数不要绑在元素上，你放在一个 computed 里也好，放在 watch 里也行，在子元素被点击的时候，更新一下这个被关注的属性，就触发了你想要触发的方法

[OHyn]

@Kylin30 拼多多即视感。。。。

[luogege]

A 方法里面放 B()，这么简单的问题，咋都这么绕呢

[OHyn]

@no1xsyzy 按楼主的说法，其实嵌套之后啥都不用添加，在内外层分别监听 click 就行了。。。

[luogege]

@luogege 看错了，直接父元素套子元素完事

[clf]

这个又不是叠在一起的 div 。按你的描述：点到按钮了执行按钮逻辑，点到按钮外的地方执行失焦逻辑。没必要做成后者覆盖前者。

[SakuraKuma]

这, 不是用 vue 吗..
aboveClickEvent(){xxxx; this.belowClickEvent()} // 直接显式调用不就好了.
belowClickEvent(){xxxx;}

除非你两 div 还是动态上下的..

[registerrr]

做父子层级吧？子层级作为直接被点击的元素，子层级被点击后去触发父层级的点击事件

[wednesdayco]

上个订阅者不就好了 互相通知呗

[darknoll]

每个 div 响应的时候把这两个 div 的事件都执行了不就完事了

[zhuweiyou]

既然是重叠的, 上面的 DIV 被点击, 两个处理函数都调用一下就行了...

[cereschen]

如果你不需要处理 event 那么实现的方式太多了
需要的话就用 dispatchEvent

[chaoFanExcellent]

你执行 A，把 B 方法调用下不就行了，又不是真的要点击。