Question

我想问一下：

如何让小组显示超过div a和b？
即使用户点击div a或b，我也想捕捉群组中的事件。

基本上该组应该在视觉上覆盖其他两个div，所以当我在组内部点击时，只有组div应该检测到mousedown。

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

为孩子使用不透明度0。
使用$_GET代替event.currentTarget。

使用此配置，子项实际上高于event.target，但不可见，事件由groups元素捕获，而不是子项。

＆＃13;

groups

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

如何捕捉父div的事件？

1 个答案: