[TIL] label с аттрибутом "for" генерирует событие "click" по input

til
#1

Обработчик этого второго клика может выглядеть как двойное выполнение обработчика. Раньше сталкивался с этим поведением. Не мог его предсказать, но если задуматься то все логично. И вот это поведение всплыло снова в недавнем обсуждении. Код для демонстрации:

https://jsfiddle.net/8aujt2vf/

<div class="wrapper" style="background: yellow;">
	<label for="some-input" style="background: blue; padding: 2em;">
		<input id="some-input" />
	</label>
</div>

<script type="text/javascript">
document.querySelector('.wrapper').addEventListener('click', function (event) {
	console.log('event.target', event.target)
})
</script>

При клике по голубому в консоли выводится 2 лога от 2х вызовов обработчика клика. При этом если кликать по желтому полю или инпуту то лог только 1.


Пост в рамках инициативы “Сегодня я узнал[а]

#2

Привет! Это часть спецификации, с инпутами в разных браузерах разное поведение. Почему и говорят, что надо ловить change. Вот описание: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

1 Like