javascript - 如何在父 div 上捕获事件？

Question

我想问:

• 如何让分组显示在 div a 和 b 之上？
• 即使用户单击 div a 或 b，我也想在组上捕获事件 mousedown。

基本上，该组应该在视觉上覆盖其他两个 div，因此当我在被该组覆盖的内部单击时，只有组 div 应该检测到 mousedown。

注意:我无法更改 HTML 结构。

document.getElementById('group').addEventListener('click', function(event) {
  event.stopPropagation();
  alert('click on: ' + event.target.id);
});

#group {
  position: absolute;
  width: 250px;
  height: 250px;
  background-color: yellow;
  z-index: 2;
  opacity: 0.5;
}

#a {
  position: absolute;
  left: 80px;
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: blue;
  z-index: 0;
}

#b {
  position: absolute;
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: blue;
  z-index: 0;
}

<div id="group">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

Answer 1

1. 为 child 使用不透明度 0。

2. 使用 event.currentTarget 而不是 event.target。

有了这个配置， child 实际上在 groups 之上，但不可见，事件被 groups 元素捕获，而不是 child 。

document.getElementById('group').addEventListener('click', function(event) {
  event.stopPropagation();
  alert('click on: ' + event.currentTarget.id);
});

#group {
  position: relative;
  width: 250px;
  height: 250px;
  background-color: yellow;
  z-index: 2;
  opacity: 0.5;
}

#a {
  position: relative;
  left: 80px;
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: blue;
  z-index: 0;
  opacity: 0
}

#b {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: blue;
  z-index: 0;
  opacity: 0;
}

<div id="group">
  <div id="a">A</div>
  <div id="b">B</div>
</div>