Threlte拆分组件后如何阻止点击事件冒泡？

在Threlte中，拆分组件后事件冒泡失效的核心原因是：Three.js的3D事件系统和Svelte的组件自定义事件是两个独立机制，直接在组件层面阻止Svelte事件无法影响Three.js的3D层级事件冒泡。以下是具体解决步骤：

1. 在组件内部阻止Three.js原生事件冒泡 #

修改LittleShape.svelte，在内部的<T.Mesh>上直接处理Three.js的click事件，调用e.stopPropagation()阻止3D场景中的事件向上冒泡：

<T.Mesh 
  on:click={(e) => {
    // 阻止Three.js事件向3D层级中的父对象（大形状Mesh）冒泡
    e.stopPropagation();
    // 若需要向父组件传递事件，可派发自定义事件
    $dispatch('click', e.detail);
  }}
>
</T.Mesh>

2. 父组件正常接收事件 #

修改App.svelte，正常监听组件的click事件即可：

<LittleShape on:click={() => console.log("little shape")} />

<T.Mesh on:click={() => console.log("bigger shape")}>
</T.Mesh>

关键说明 #

• 不要混淆Three.js事件和Svelte组件事件：Three.js的事件冒泡发生在3D场景的对象层级中，而Svelte组件的事件是自定义派发的，两者互不影响。
• stopImmediatePropagation()是原生DOM事件的方法，Three.js的事件对象不支持该方法，因此会报错，只需使用e.stopPropagation()即可阻止3D层级的事件冒泡。

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