Svelte表单提交事件的once修饰符不生效是什么原因？

问题根本原因 #

Svelte的once事件修饰符的作用是：事件处理函数执行一次后，就将整个绑定的事件监听器完全移除。你当前的写法将preventDefault和once修饰符放在同一个事件绑定上，执行顺序为左到右：

• 第一次触发事件时，监听器存在，先执行preventDefault阻止默认提交，再运行你定义的回调函数
• 第一次执行完成后，整个submit事件监听器被移除，后续再提交表单时没有任何自定义监听逻辑，自然会走浏览器默认的表单提交刷新行为

你绑定在按钮click事件上出现相同问题，也是同样的逻辑：once移除监听器后，preventDefault不再生效，按钮点击的默认行为就会触发表单提交。

解决方法 #

如果你需要始终阻止表单默认提交行为，同时只让自定义回调执行一次，有两种常用实现方案：

方案1：手动添加执行状态标记（更易读，推荐）

<script>
  let hasSubmitted = false
  function handleSubmit() {
    if (hasSubmitted) return
    alert('You submitted the form')
    hasSubmitted = true
  }
</script>

<form action="./" on:submit|preventDefault={handleSubmit}>
  <button type="submit">Save</button>
</form>

方案2：拆分两个事件绑定（使用once修饰符）

利用Svelte支持给同一个元素绑定多个相同事件的特性，将阻止默认行为和单次回调拆开：

<form 
  action="./" 
  on:submit|preventDefault  <!-- 这个监听器永久存在，始终阻止默认提交 -->
  on:submit|once={() => alert('You submitted the form')}  <!-- 这个监听器执行一次就移除 -->
>
  <button type="submit">Save</button>
</form>

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