表单中点击label无法切换class的技术问题求助

开发Angular模态组件时，尝试点击自定义复选框的<label>来切换其active类状态，但点击<label>内的文本（比如示例中的'M'）时class始终不生效；直接点击<input>元素时却能正常切换class。如果把<label>替换成<div>，功能就完全正常。已经隐藏了<input>来实现自定义样式，想搞清楚<label>的点击机制有没有被忽略的细节。

window.addEventListener('load', function() {
  let elems = document.querySelectorAll('.form-check-label');
  elems.forEach((e) => e.addEventListener('click', function() {
    console.log(e.classList);
  }, false));
}, false);

function checkInput(elem) {
  let checkMark = elem.querySelector('input');
  checkMark.checked = !checkMark.checked;
}

.form-check-label {
  cursor: pointer;
}

<label 
onClick = "this.classList.toggle('active');"
class="form-check-label" 
for="Monday">
  <input 
  class="form-check-input" 
  type="checkbox" 
  id="Monday" 
  value="Monday" />
  <span class="day-week">
   M
  </span>
</label>

<br />
<br />

<div 
onClick = "this.classList.toggle('active');checkInput(this);"
class="form-check-label" 
>
  <input 
  class="form-check-input" 
  type="checkbox" 
  value="Monday" />
  <span class="day-week">
   M
  </span>
</div>

核心问题出在**<label>与关联<input>的点击联动机制**上：

• 当点击<label>（或其内部非<input>的元素）时，浏览器会自动模拟触发一次对应<input>的点击事件。
• 这会导致<label>的click事件被执行两次：第一次是用户真实点击触发，第二次是<input>的点击事件冒泡到<label>触发。
• 两次classList.toggle('active')执行后，class状态相当于回到初始值，看起来就像是“未生效”。
• 而直接点击<input>时，不会触发浏览器的模拟点击，只会触发一次<label>的click事件（事件冒泡），所以toggle能正常生效。

推荐两种可靠的处理方式：

方式1：监听<input>的change事件同步class #

这种方式更符合语义，因为<label>的状态本就应该和<input>的checked状态绑定：

window.addEventListener('load', function() {
  const checkboxes = document.querySelectorAll('.form-check-input');
  checkboxes.forEach(checkbox => {
    const label = document.querySelector(`label[for="${checkbox.id}"]`);
    if (label) {
      // 初始化label的class状态
      label.classList.toggle('active', checkbox.checked);
      // 监听input状态变化，同步label的class
      checkbox.addEventListener('change', () => {
        label.classList.toggle('active', checkbox.checked);
      });
    }
  });
});

对应的HTML可以去掉onClick属性：

<label 
class="form-check-label" 
for="Monday">
  <input 
  class="form-check-input" 
  type="checkbox" 
  id="Monday" 
  value="Monday" />
  <span class="day-week">
   M
  </span>
</label>

方式2：在<label>的点击事件中过滤模拟事件 #

利用事件的isTrusted属性判断是否为用户真实点击（浏览器模拟的事件isTrusted为false）：
修改label的onClick属性：

<label 
onClick = "if(event.isTrusted) this.classList.toggle('active');"
class="form-check-label" 
for="Monday">
  <!-- 内部元素保持不变 -->
</label>

或者用事件监听的方式实现：

window.addEventListener('load', function() {
  let elems = document.querySelectorAll('.form-check-label');
  elems.forEach((e) => e.addEventListener('click', function(event) {
    // 只处理用户真实触发的点击事件
    if (event.isTrusted) {
      this.classList.toggle('active');
    }
  }, false));
}, false);

内容的提问来源于stack exchange，提问作者AugustoM