Html在使用z索引时单击两个同级_Html_Css_Z Index_Mouseclick Event

Html在使用z索引时单击两个同级

html css

Html在使用z索引时单击两个同级,html,css,z-index,mouseclick-event,Html,Css,Z Index,Mouseclick Event,我有一个两个div，必须使用z-index在彼此上方显示但是，两者都必须对相同的单击事件作出反应，就像该事件是从一个子事件预组织到一父事件一样这有可能吗这里有一个例子 <body> <div id="upper" style=" position: absolute; z-index: 1; width: 100px; height: 100px; background-color: #000"></div>

我有一个两个div，必须使用z-index在彼此上方显示

但是，两者都必须对相同的单击事件作出反应，就像该事件是从一个子事件预组织到一父事件一样

这有可能吗

这里有一个例子

<body>
  <div id="upper" style=" position: absolute; z-index: 1; width: 100px; height: 100px; background-color: #000"></div>
  <div id="lower" style="position: absolute; z-index: 0; width: 120px; height: 120px; background-color: #00f"></div>
</body>

两者都应该侦听本机单击事件，因为较低的同级可以持有iframe

编辑以获取更多说明

目标是使本例中的youtube iframe可单击，并保留canvas元素上的所有控件。

只需编写一个Javascript事件侦听器，在单击另一个按钮时单击另一个按钮即可

document.getElementById('upper').addEvenListener('click', () => {
console.log('parent clicked')
})
document.getElementById('lower').addEvenListener('click', () => {
document.getElementById('upper').click()
})

正如前面提到的，这还不够，因为下面的元素可能包含一个iframe，我无法控制这个元素如何处理内部的点击。如果可能的话，我需要准备一个精确的本地点击事件。你是在寻找一个显式的JS解决方案还是CSS也可以？指针事件：

pointer events:none

（在上面的元素上）可以完成这项工作吗？为什么你不能将这两个div包装在一个父div中，然后将您的单击事件基于父对象？

指针事件：遗憾的是，没有

是不够的，因为两个元素都需要对指针事件做出反应。唯一的区别是，较高的对象没有在较低对象的x和y位置触发。较高的一个是画布宽度，在较低的一个位置是一个整体，较低的一个是任何东西，包括一个iframe。