Why does a parent element react when I click a nested button?

The click event can travel upward from the nested button through its ancestors. That behavior is called event bubbling. If both the button and the card have bubble-phase click handlers, both may run for one click: the button’s handler runs, then the card’s handler as the event bubbles upward. [S1]

For example, the button might save an item while the card handler opens its details. Clicking the button can then do both, even if you intended only to save. The parent reacting does not, by itself, mean the click was registered on the wrong element. It may simply be handling the same bubbling event.

Log event.target and event.currentTarget inside each handler. The target identifies the event’s target; currentTarget identifies the element whose listener is currently being invoked. [S2] In the button handler, currentTarget identifies the button. In the card handler, it identifies the card, even when the button was the event’s target.

Here is a small example you can adapt:

card.addEventListener("click", (event) => {
  console.log("card handler", {
    target: event.target,
    currentTarget: event.currentTarget
  });
});

button.addEventListener("click", (event) => {
  console.log("button handler", {
    target: event.target,
    currentTarget: event.currentTarget
  });
});

If the button itself is the event target, both handlers can show the button as target, while currentTarget differs between handlers. This distinguishes the event’s target from the element whose handler is running.

Yes. If the icon or label is a nested element inside the button and is the event’s target, event.target may identify that nested element. The button’s handler can still be running, so its event.currentTarget identifies the button. The same distinction applies when the event continues to a parent handler. [S1] [S2]

Try clicking the button’s text, its icon, and an empty part of the button. Compare the two properties in each handler. If your code needs to treat clicks anywhere inside the button as a button action, don’t assume target will always be the button itself. Check whether the target is within the intended button, or use the known listener element represented by currentTarget.

First decide whether the card should respond to every click inside it, or only to clicks on its non-button area. For the latter, make the card handler ignore clicks that came from the button or its contents—for example, check whether the target is inside the button before opening the card. Another option is to stop propagation in the button handler; stopPropagation() is an event propagation method. [S2] Use it only when you intend the click not to continue to ancestor handlers, since it changes how the event reaches them.

A useful debugging sequence is: log target and currentTarget; confirm that the button handler runs; check whether the card handler also runs; then choose a rule for the card handler. The right choice depends on which parts of the card should respond to clicks. Retest the button and the rest of the card after making the change.