Блог

       window.onload = function(){
         var wow = document.getElementById("wow");
    	 wow.onclick = function(){
    	     alert("hi");
    	 }
      }  

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

Это мой код, когда я нажимаю на «Текст», он дважды предупреждает hi, но когда я нажимаю на поле, onclick элемент срабатывает только один раз, почему?

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

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

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

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

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

ДЕМОНСТРАЦИЯ

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

 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);
}
  

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

Пузырь событий.

Флажок является дочерним узлом метки. Вы устанавливаете флажок. Всплывающее событие для метки. Затем дважды появляется предупреждение.

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

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


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

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

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

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

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

     //stop bubble
     event.stopPropagation();

 }, false); 
  

http://jsfiddle.net/96vPP/

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

https://jsfiddle.net/ashes/0bcauenm/

 $(".someBigContainer").on("click", "input[type=checkbox]", ()=> {
    $output.val("Clicked: checkboxn"   $output.val());
}); 
  

редактировать: добавлена ссылка с фрагментом кода.

Это, вероятно, самый простой ответ. Просто добавьте интервал вокруг вашего текста и остановите распространение события.

 window.onload = function(){
    var wow = document.getElementById("wow");
    wow.onclick = function(){
        alert("hi");
    }
}  

 <label id="wow">
    <input type="checkbox" name="checkbox" value="value">
    <span onclick="event.stopPropagation()">Text</span>
</label>  

Или без встроенного JavaScript

 window.onload = function(){
    var wow = document.getElementById("wow");
    wow.onclick = function(){
        alert("hi");
    }

    var span = document.getElementsByTagName("span")[0];
    span.onclick = function(event){
        event.stopPropagation();
    }
}  

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

Для тех, кто использует React и Material UI — я столкнулся с этой проблемой в одной из моих форм. event.preventDefault() останавливает запуск события, как описано в принятом ответе.

   <Button
    onClick={(event) => {
      event.preventDefault()
      this.handleCardClick(planName)
    }}
  >
    <FormControl component="fieldset">
      <RadioGroup
        row
        value={selectedPlan}
      >
        <FormControlLabel
          control={<Radio color="secondary" />}
          label={label}
        />
      </RadioGroup>
    </FormControl>
  </Button>
  

Используйте change для прослушивания событий вместо click