событие stopPropagation на метке

Question

Мне трудно понять, почему я не могу остановить распространение, когда нажимаю на ярлык.

        <label for="box">
            <input type="checkbox" id="box"/>
            Test
        </label>

        $(function(){
            $('#box').on('click',checkbox);
            $('label').on('click',label);
        }) 

        function label(e){
            console.log('label');
            e.stopPropagation();
        }

       function checkbox(e){
          console.log("checkbox");
          e.stopPropagation();
       }

Когда я нажимаю ярлык, функция флажка срабатывает несмотря на stopPropagation () в функции метки. Эта проблема кажется простой, но решение кажется гораздо менее ...

Answer 1

Это происходит потому, что это поведение браузера по умолчанию. Вы можете связать флажок с меткой двумя способами:

1. Флажок внутри метки, например:

   <label><input type="checkbox" id="box"/>Test</label>
   

2. Или с помощью for атрибут вроде:

   <label for="box">Test</label><input type="checkbox" id="box"/>
   

В обоих случаях флажок будет автоматически проверен / не отмечен при нажатии ярлыка. Это также упоминается в w3.org .

Итак, чтобы предотвратить действие по умолчанию, вы должны использовать event.preventDefault() вместо внутри label click как:

$(function() {
  $('#box').on('click', checkbox);
  $('label').on('click', label);
})

function label(e) {
  e.preventDefault();
  console.log('label');  
}

function checkbox(e) {
  e.stopPropagation();
  console.log("checkbox");  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="box">
  <input type="checkbox" id="box"/>Test
</label>

Если вы ищете более простое решение, вы можете отделить метку и флажок и удалить атрибут for из метки, например:

<div class="wrapper">  
  <input type="checkbox" id="box"/>&nbsp;
  <label>Test</label>
</div>

Answer 2

Это работа для меня

$('#box').on('change',function(e){
    console.log(e);
});