javascript - 为什么父元素上的 PreventDefault 会禁用以编程方式检查单击时的子复选框？

Question

div 元素的点击事件以 e.preventDefault() 开头。这使得手动单击复选框input或其关联的label不再起作用。

借助更多 JavaScript 代码，手动单击标签 会生成预期结果，因为该复选框现在已通过编程方式选中/取消选中。

但是，尽管已经实现了用于以编程方式检查/取消选中的类似 JavaScript 代码，但手动单击复选框 input 仍然不起作用。为什么？

document.querySelector('div').onclick = function (e)
{
      e.preventDefault();
      if (e.target.tagName.toUpperCase() == 'LABEL')
      {
          e.target.previousElementSibling.checked = !e.target.previousElementSibling.checked;
      }
      else if (e.target.tagName.toUpperCase() == 'INPUT')
      {
          e.target.checked = !e.target.checked;
      }
}

<div>
      <input  id="check" type="checkbox">
      <label for="check">Label Text</label>
</div>

Answer 1

防止默认传播通常会向下传播到子级。有一种方法可以通过使用 event.stopPropagation 来阻止这种情况发生。请阅读此处，详细了解可能对您的事业有所帮助的其他有用方法。

https://chunkybyte.medium.com/the-one-with-event-propagation-and-e-preventdefault-part-1-6d84f3c4220