Svelte组件on:click挂载时触发问题：如何仅点击时执行函数？

问题根源 #

你的问题核心不在子组件的on:click={checkItem}，而是父组件的事件监听写法错误，导致控制台在组件挂载时就打印"click"，且点击图标时无响应。

具体错误分析 #

父组件中on:clicked={console.log("click")}的写法，会在Item组件渲染时直接执行console.log("click")——因为这是函数调用语句，而非传递事件处理函数的引用。这就造成了组件一挂载就打印日志的现象，同时因为没有绑定真正的事件处理函数，后续点击触发clicked事件时，父组件不会有任何响应。

修复方案 #

将父组件的事件监听改为传递一个函数，确保只有事件触发时才执行日志打印：

修改后的List.svelte代码：

{#each items as item}
    <Item bind:item on:clicked={() => console.log("click")} />
{/each}

验证结果 #

修改后：

• 组件挂载时控制台不会打印"click"
• 点击子组件的图标，checkItem函数正常执行，切换item.checked状态并派发clicked事件，父组件接收到事件后打印"click"

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