强制事件传播

Question

fiddle

当我单击相应的“单击我！”时按钮仅触发一个console.log（单击事件）。

为什么在这里停止传播？点击后应将"Click me!"插入带有“ .......”的按钮。

<button style="position: absolute" onclick="onClick()">Click me!</button> <button style="height: 4em" onclick="onClick()">...............................................</button>

每个人都在网上停止宣传，但我想强制执行！

理想的结果是单击一次即可触发两个事件。

Answer 1

事件传播到父元素，而不是兄弟元素，因此事件传播对您无济于事。 （事实上​​，您已经更改了布局以使其像嵌套按钮一样外观并不影响这一点。）如果您需要触发两个事件，则需要手动进行，或者实际上是嵌套元素（将父元素更改为<button>之外的其他元素，因为它们不能嵌套）：

onClick = function() {
  console.log("onclick triggered");
}

<div style="height: 4em; border: 1px solid;" onclick="onClick()">
  <button onclick="onClick()">Click me!</button>
  ...............................................
</div>