Svelte 5中onclick事件如何使用stopPropagation？旧语法报错求解

Svelte 5 已经移除了旧版中类似 onclick|stopPropagation 的管道式事件修饰符语法，所以你之前的写法会报属性名无效的错误。现在要实现阻止冒泡，需要在事件处理函数中直接调用原生 DOM 事件的 stopPropagation() 方法。

有两种常见实现方式：

1. 直接在事件绑定的箭头函数中处理

<div onclick={(event) => {
    event.stopPropagation();
    someFunc(); // 执行你的原有逻辑
}}>
    <button onclick={otherFunc}></button>
</div>

2. 在单独的处理函数中调用方法

<script>
    function handleDivClick(event) {
        event.stopPropagation();
        // 这里写点击div后的逻辑
    }

    function otherFunc() {
        // 按钮点击逻辑
    }
</script>

<div onclick={handleDivClick}>
    <button onclick={otherFunc}></button>
</div>

本质上就是利用原生 DOM 事件对象的能力，这也是 Svelte 5 简化事件处理逻辑的设计方向。

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