Svelte 里怎么用事件修饰符阻止表单提交刷新页面？

UP主～子轩提问于 2026-03-23 23:10:20 阅读 37

框架

我在 Svelte 里写了个表单，点击提交按钮时页面总是刷新，试了加 on:submit|preventDefault 但好像没生效，是不是写法有问题？

下面是我的代码：

<form on:submit|preventDefault={handleSubmit}>
  <input type="text" bind:value={name} />
  <button type="submit">提交</button>
</form>

明明加了 preventDefault 修饰符，为什么还是跳转刷新？是不是还要在 handleSubmit 里手动调 preventDefault()？

我来解答赞 4 收藏

反馈

2 条解答

恒豪 Lv1

问题在于事件修饰符的语法写错了。正确的写法是把修饰符放在等号前面，试试这样：<form on:submit|preventDefault={handleSubmit}> 改成 <form on:submit|preventDefault={handleSubmit()}> 或者直接用 <form on:submit={e => { e.preventDefault(); handleSubmit() }}> 这样肯定不会刷新页面了。

2026-03-30 18:13

シ峻成 Lv1

你在 Svelte 中使用事件修饰符的写法稍微有点问题。标准写法应该是 on:submit|preventDefault 而不是 on:submit|preventDefault= 这样的形式。你不需要在 handleSubmit 函数中手动调用 preventDefault()，因为修饰符已经处理了这个逻辑。

你可以这样改写你的代码：

form on:submit|preventDefault={handleSubmit}>

注意 on:submit|preventDefault 后面直接跟事件处理函数 {handleSubmit}，中间没有等号。这样应该就能阻止表单提交时的页面刷新了。

2026-03-23 23:15