Svelte事件传播问题：子组件交互触发父组件事件

问题根源很明确：你给子组件绑定的是mousedown|stopPropagation，但父组件监听的是click事件。click事件的触发依赖mousedown和mouseup两个事件的完成——你只阻止了mousedown的传播，后续的mouseup和click事件依然会冒泡到父组件，导致toggle被触发。

下面是几个直接有效的解决方案：

• 方案一：阻止子组件的click事件冒泡
  直接给子组件的click事件添加stopPropagation修饰符，从根源切断click事件的传播路径：

  <!-- Child Component -->
  <div class="child" on:click|stopPropagation={execute}>
       text
  </div>
  

• 方案二：同时阻止mousedown和mouseup传播（保留mousedown逻辑）
  如果你的业务必须在mousedown时执行execute，需要同时阻止mousedown和mouseup的传播，因为click事件是这两个事件的组合结果：

  <!-- Child Component -->
  <div class="child" 
       on:mousedown|stopPropagation={execute}
       on:mouseup|stopPropagation>
       text
  </div>
  

  这里mouseup不需要绑定执行函数，仅用修饰符阻止传播即可。

• 方案三：父组件使用self修饰符
  若不想修改子组件代码，可在父组件的click事件上添加self修饰符，这样只有点击父组件自身区域（不包含子元素）时才会触发toggle：

  <!-- Parent Component -->
  <div class="parent" on:click|self={toggle}>
       {#if expand}
               <Child />
       {/if}
  </div>
  

注意事项 #

• 别乱用preventDefault，它的作用是阻止浏览器默认行为（比如表单提交、链接跳转），和事件传播是完全独立的概念，解决冒泡问题用stopPropagation或self就足够。
• Svelte的事件修饰符支持链式组合，比如on:click|stopPropagation|preventDefault，可根据实际需求搭配使用。

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