标签上的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()内单击event.preventDefault()而不是单击：

label

$(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

Answer 2

这对我有用

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