Svelte技术问题：父div鼠标事件被子div触发的解决咨询

这是事件冒泡导致的问题——子元素触发mouseup事件后，事件会向上传递到父元素，触发父元素绑定的处理函数。可以通过以下两种方式解决：

方法一：父元素内判断点击目标 #

修改父元素的mouseup事件处理逻辑，仅当点击的是父元素本身时才执行createObject：

<div class='board' on:mouseup={(e) => {
  // 仅当触发事件的元素是父元素本身，且selected不为空时执行
  if (e.target === e.currentTarget && $selected != null) {
    createObject();
  }
}}>
    <ObjectSelection/>
    
    {#each $editor.objects as object}
        <ObjectOnBoard bind:x={object.geometry.x} bind:y={object.geometry.y}/>
    {/each}
</div>

• e.currentTarget：始终指向绑定事件的元素（即.board div）
• e.target：指向实际触发事件的元素，只有当两者相等时，才说明点击的是父元素区域

方法二：子组件阻止事件冒泡 #

在子组件（ObjectSelection和ObjectOnBoard）的mouseup事件中添加阻止冒泡的逻辑，让事件无法传递到父元素：

以ObjectSelection为例：

<!-- ObjectSelection.svelte -->
<div on:mouseup={(e) => {
  e.stopPropagation(); // 阻止事件向上冒泡
  // 组件原有点击逻辑
}}>
  <!-- 组件内容 -->
</div>

同样在ObjectOnBoard组件中添加相同的stopPropagation()处理即可。

两种方法对比 #

• 方法一无需修改子组件代码，适合子组件数量多或无法修改子组件的场景
• 方法二更精准，直接从事件源头阻止传递，适合能控制子组件代码的场景

内容的提问来源于stack exchange，提问作者Ölavur Nón