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

2021-04-23 01:48:24 +08:00
 LeeReamond

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

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/772591

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX