CODEWITHSUNDEEP
javascripthtml
volna
volna

Reputation: 2610

Clicking on input's label triggers two clicks

Working with an input the following behaviour has been discovered. When the label is attached to the input with for attribute two click events will happen. Can someone please explain the behaviour of this "anomaly".

And if there a way to prevent the click happening on input if only the label was clicked, of course besides removing the for attribute.

document.addEventListener(`click`, onClick)

var counter = 0;

function onClick(event) {
  ++counter
  console.log(counter)
}
label {
  display: block;
  background-color: lightgrey;
  margin: 5px 0 5px;
}
<input id='input'>
<label for='input'>I belong to input</label>
<label>I belong to no one</label>

Upvotes: 9

Views: 2316

Answers (4)

Alexandre Annic
Alexandre Annic

Reputation: 10768

The first click is related to the label, the second to the associated input. As you can see, after clicking the label, the focus is set on the input. If you remove the input, the 2nd click won't be triggered. It's the normal behavior of the browser.

You can prevent this with event.preventDefault();.

document.addEventListener(`click`, onClick)

var counter = 0;

function onClick(event) {
  event.preventDefault();
  ++counter;
  console.log(counter);
}
label {
  display: block;
  background-color: lightgrey;
  margin: 5px 0 5px;
}
<input id='input'>
<label for='input'>I belong to input</label>
<label>I belong to no one</label>

Upvotes: 3

Laura Landuyt
Laura Landuyt

Reputation: 126

The label is a nested item, each item will trigger the event.

A simular question on how to prevent it, is already answered [here] (jQuery Click fires twice when clicking on label)

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to use event.preventDefault(); to prevent the click for the next item it will trigger click by default, which is input element in your case. But note that this will prevent click for all the elements in chain, which will eventually block the click chain which you may require for other elements.

document.addEventListener(`click`, onClick)

var counter = 0;

function onClick(event) {
  event.preventDefault();
  ++counter
  console.log(counter)
}
label {
  display: block;
  background-color: lightgrey;
  margin: 5px 0 5px;
}
<input id='input'>
<label for='input'>I belong to input</label>
<label>I belong to no one</label>

Upvotes: 1

Vladimir Proskurin
Vladimir Proskurin

Reputation: 391

A click is processed for both elements.

document.addEventListener(`click`, onClick)

var counter = 0;

function onClick(event) {
  event.preventDefault();
  ++counter
  console.log(counter)
}

Upvotes: 1

Related Questions