При работе со входом было обнаружено следующее поведение. Когда метка прикреплена к входу с атрибутом for, произойдут два события щелчка. Может кто-нибудь объяснить, пожалуйста, поведение этой "аномалии".

И если есть способ предотвратить щелчок на входе, если щелкнуть только метку, конечно, кроме удаления атрибута for.

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>
3
volna 21 Авг 2018 в 12:19

4 ответа

Лучший ответ

Клик обрабатывается для обоих элементов.

document.addEventListener(`click`, onClick)

var counter = 0;

function onClick(event) {
  event.preventDefault();
  ++counter
  console.log(counter)
}
1
Vladimir Proskurin 21 Авг 2018 в 09:25

Метка является вложенным элементом, каждый элемент вызывает событие.

На вопрос о том, как его предотвратить, уже есть ответ [здесь] (jQuery Клик срабатывает дважды при нажатии на ярлык)

2
Laura Landuyt 21 Авг 2018 в 09:28

Первый щелчок связан с меткой, второй - с соответствующим вводом. Как вы можете видеть, после нажатия на метку фокус устанавливается на входе. Если вы удалите ввод, второй щелчок не будет срабатывать. Это нормальное поведение браузера.

Вы можете предотвратить это с помощью 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>
1
Alexandre Annic 21 Авг 2018 в 09:31

Вам нужно использовать event.preventDefault();, чтобы запретить click для следующего элемента, который будет вызывать щелчок по умолчанию, который является элементом input в вашем случае. Но обратите внимание, что это предотвратит щелчок для всех элементов в цепочке, что в конечном итоге заблокирует цепочку click, которая может потребоваться для других элементов.

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>
1
Ankit Agarwal 21 Авг 2018 в 09:27
51945451