Prevent click on label from triggering child button

Question

When setup like this, clicking on a label that has a child button triggers button's onclick event:

function fireButton() {
  console.log("Button fired!");
}

<label>Label
  <button onclick="fireButton()">Button</button>
</label>

is there a way to prevent this?

Answer 1

You can add preventDefault for labels and keep the existing code:

document.querySelector("label").addEventListener("click", function(event) { 
    event.preventDefault();
}, false);