input внутри label. Особенность HTML.

Admin HTML, JavaScript Обсудить

Событие при клике на HTML тег label с вложенным input срабатывает дважды.

Об этом полезно знать, чтобы правильно обрабатывать событие в JavaScript.

Особенность работы input внутри label в том, что при клике на поле инпут один раз, срабатывает так будто было 2 клика.

Для предотвращения такого поведения мы сделаем так, чтобы оно не срабатывало на label, но сработало на input.

container.onclick = function(event) {
    var target = event.target,
        label = target.closest('.block');

    // Если это блок label, то отменяем событие
    if (!label || target.classList.contains('block')) {
        return;
    }
}
Метки:

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "input внутри label. Особенность HTML."
Если вам нужно добавить участок кода ставьте его между тегами <code></code>