html - 兄弟与父子相对定位和事件冒泡

Question

.parent {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
}

.foo{
  background-color: blue;
  opacity: 0.5;
  position: absolute;
  left: 25%; /*This cannot be changed.*/
  top: 25%; /*This cannot be changed.*/
  width: 50px; /*This cannot be changed.*/
  height: 50px; /*This cannot be changed.*/
}

.fooBorder{
  border: 3px solid black;
  position: absolute;
  left: 22%; /*This cannot be changed.*/
  top: 22%; /*This cannot be changed.*/
  width: 50px; /*This cannot be changed.*/
  height: 50px; /*This cannot be changed.*/
}

<h3>Situation 1</h3>
<div class="parent">
  <div class="foo" onClick="alert('foo')"></div>
  <div class="fooBorder" onClick="alert('fooBorder')"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<h3>Situation 2</h3>
<div class="parent">
  <div class="fooBorder" onClick="alert('fooBorder')">
      <div class="foo" onClick="alert('foo')"></div>
  </div>
</div>

我进退两难，无法合并两个问题。我想要两全其美，但这是不可能的。

在情况 1中， foo 和 fooBorder 相对于父级的位置。这就是我想要定位元素的方式。但是当你点击时，只有 fooBorder 会得到一个点击事件。但是我必须在两个元素上都有一个点击事件。

在情况 2中，foo 是 fooBorder 的子项，这就是我想要构建我的 html 的方式，但我希望从情况 1 中定位。但是现在点击事件在 foo 和 fooBorder 上都可以正常工作。

如果我能让事件发挥作用，我会妥协并选择情况 1 作为定位。实际上情况更复杂，我把它简化了。如果有帮助的话，它实际上是一个角度应用程序。有人有想法么？

标签： htmlcssangularcss-position