Почему элемент onclick дважды запускается для элемента label

Ответ 1

Когда вы нажимаете на метку, она запускает обработчик кликов, и вы получаете предупреждение.

Но нажатие на метку также автоматически отправляет событие щелчка в связанный элемент ввода, поэтому это рассматривается как щелчок на флажке. Затем событие bubbling вызывает событие клика, которое должно быть запущено на содержащем элементе, которое является меткой, поэтому ваш обработчик снова запускается.

Если вы измените свой HTML на это, вы не получите двойное предупреждение:

<input id="wowcb" type="checkbox" name="checkbox" value="value">
<label id="wow" for="wowcb">Text</label>

Теперь метка связана с флажком с помощью атрибута for вместо обертывания вокруг него.

DEMO

Ответ 2

Если вы намерены отвечать только на клики на ярлыке, а не на флажке, вы можете посмотреть свойство event.target. Он ссылается на элемент, называемый слушателем, так что если клик не был на этом элементе, не делайте этого действия:

window.onload = function(){
  var el = document.getElementById('wow');
  el.addEventListener('click', function(event) {

    if (this === event.target) {
      /* click was on label */
      alert('click was on label');

    } else {
      /* click was on checkbox */
      event.stopPropagation();
      return false;
    }

  }, false);
}

Если, с другой стороны, вы хотите отвечать только на клики на флажке (где щелчок на ярлыке также дает щелчок на флажке), а затем выполните обратное. Ничего не делайте для кликов на ярлыке и позволяйте им устанавливать флажок:

window.onload = function(){
  var el = document.getElementById('foolabel');
  el.addEventListener('click', function(event) {

    if (this === event.target) {
      /* click was on label */
      event.stopPropagation();
      return false;

    } else {

      /*
      ** click is from checkbox, initiated by click on label
      ** or checkbox                                  
      */

      alert('click from checkbox');
    }

  }, false);
}

Эта версия, кажется, имеет самое естественное поведение. Однако изменение разметки так, чтобы метка больше не обертывала флажок, означает, что слушатель не вызывается.

Ответ 3

Событие пузырь.

Флажок - это дочерний элемент node метки. Вы установите флажок. Событие пузырь к этикетке. Затем дважды появляется предупреждение.

Чтобы предотвратить появление предупреждения дважды, когда вы нажимаете этот флажок. Вы можете изменить функцию onclick следующим образом:

wow.onclick = function(e){
    alert('hi');
    stopBubble(e);
}


function stopBubble(e)  
{  
    if (e && e.stopPropagation)  
        e.stopPropagation()  
    else 
        window.event.cancelBubble=true 
}  

Надеюсь, это сработает для вас.

Ответ 4

Тег Label будет связан с тегом ввода внутри него. Поэтому, когда вы нажимаете на метку, она также запускает событие щелчка для ввода, а затем пузырится на сам ярлык.

Смотрите это:

document.getElementById("winput").addEventListener('click', function(event){
     alert('input click');

     //stop bubble
     event.stopPropagation();

 }, false); 

http://jsfiddle.net/96vPP/

Ответ 5

Снова врезался в этого гоча и решил доказать, что он сделал для себя, надеюсь, помогая мне вспомнить. Чтобы помочь будущим людям, которым вышеупомянутое, возможно, не достаточно ясно, вот пример, который я сделал.