Enforce event propagation

Question

when I click on the respective "Click me!" buttons only one console.log (click event) is fired.

Why is the propagation stopped here? The click should to through "Click me!" into the button underneeth with the ".......".

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

On the web everyone whats to stopPropagation, but I want to enforce it!

The desired outcome is to get two events firing from a single click.

score 2 · Answer 1 · answered Apr 28 '19 at 15:38

Events propagate to parent elements, not sibling elements, so event propagation won't help you here. (The fact that you've changed the layout to make it look like the buttons are nested doesn't affect this.) If you need to trigger both events you'll need to do it manually, or actually nest the elements (changing the parent to something other than a <button>, because they can't be nested):

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

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

Enforce event propagation

The desired outcome is to get two events firing from a single click.

1 Answers1