CODEWITHSUNDEEP
javascripthtmlcssdom
questioning
questioning

Reputation: 287

On click for Label with an embedded button

What's the correct way to handle a click on the Label without triggering the button?

Given the following html:

<label>
Label
<button> Remove</button>
</label>

Both css as javascript solutions are fine.

Upvotes: 0

Views: 461

Answers (1)

Nik
Nik

Reputation: 358

You can use e.stopPropagation(); on child.

  let label = document.querySelector("label");
  let button = document.getElementById("remove-button");
  label.addEventListener("click", () => {
    console.log("Label Clicked!");
  });
  button.addEventListener("click", (e) => {
    e.stopPropagation();
  });
<label>
  Label
  <button id="remove-button">Remove</button>
</label>

Upvotes: 1

Related Questions