如何在SvelteJS中点击复选框时阻止父元素执行点击代码？

点击子组件复选框时父组件的点击事件也会触发，核心原因是事件冒泡机制——子元素的点击事件会向上传递到父元素。你之前尝试的preventDefault()无效，是因为它仅阻止元素的默认行为（比如会让复选框无法勾选，反而恶化问题），但不影响事件冒泡。

正确的解决方式是使用stopPropagation()阻止事件向上冒泡，具体实现有两种方式：

方式一：在事件回调中直接处理 #

修改子组件的点击事件绑定，先调用stopPropagation()再执行你的业务逻辑：

<!-- 子组件 -->
<input type="checkbox" on:click={(e) => {
  e.stopPropagation();
  childClickHandler();
}}>

方式二：在处理函数内部调用 #

如果childClickHandler需要复用，可以给它传入事件对象，在函数内部阻止冒泡：

<!-- 子组件脚本 -->
<script>
  function childClickHandler(e) {
    e.stopPropagation();
    // 这里写你的复选框点击逻辑
  }
</script>

<!-- 子组件模板 -->
<input type="checkbox" on:click={childClickHandler}>

这样处理后，点击复选框时只会触发子组件的childClickHandler，父组件的parentClickHandler不会被执行，同时也不会影响复选框正常的勾选/取消勾选行为。

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