单击子元素，在 svelte 中调用父 on:click 函数

Question

单击子元素时，附加到父元素的事件会在 svelte 中触发。我在简单的 CSS 和 HTML 中尝试了相同的方法，它工作得很好，而在 svelte 中，父操作被触发。我在下面有一个 REPL 代码，它模拟了我的场景，在控制台中单击子进程会打印“hi”。

<script>
let name = 'world';
</script>
<div style="padding:50px; border:solid;height:200px; z-index:1" on:click={() => {console.log('hi')}}>
    <div style="border:solid;height:200px; z-index:999">
        <h1>Hello {name}!</h1>
    </div>
</div>

Answer 1

你必须使用 self 修饰符 svelte event event-modifiers

<div style="padding:50px; border:solid;height:200px; z-index:1" on:click|self={() => {console.log('hi')}}>...</div>