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;
    }
}
Метки:

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

А если захочется написать всякие гадости с переходом на личности, да тоже не стесняйтесь, но обычно я отправляю такое в спам. Люблю, когда дома чисто.

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

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