SvelteKit中按钮同时触发表单提交与on:click事件失效问题

问题出在两个关键点：

• 第一个关注表单把on:click绑在了form元素上，点击提交按钮时虽然触发了状态切换，但表单的默认提交行为没有正常执行；
• 第二个取消关注按钮完全没包裹在表单里，点击时只会切换前端状态，根本没法把请求发给后端。

下面是优化后的实现方式：

优化代码示例 #

{#if user.id !== localUserId}
  <TableBodyCell>
    {#if !isFollowing}
      <!-- 关注操作表单 -->
      <form method="POST" action="?/followUser" on:submit={() => toggleIsFollowing()}>
        <Button type="submit">
          <PlusSolid class="h-10 w-10 fill-current text-[#333333] hover:cursor-pointer" />
        </Button>
        <Heading customSize="mb-2 text-2xl font-extrabold" style="color:#333333"> Follow </Heading>
      </form>
    {:else}
      <!-- 取消关注操作表单 -->
      <form method="POST" action="?/unfollowUser" on:submit={() => toggleIsFollowing()}>
        <Button type="submit">
          <MinusSolid class="h-10 w-10 fill-current text-[#333333] hover:cursor-pointer" />
        </Button>
        <Heading customSize="mb-2 text-2xl font-extrabold" style="color:#333333"> Unfollow </Heading>
      </form>
    {/if}
  </TableBodyCell>
{/if}

额外建议：保证前后端状态一致 #

如果担心前端状态切换和后端提交不同步（比如网络请求失败时前端状态已经变了），可以改成异步处理，等请求成功后再更新状态：

// 处理关注提交的函数
async function handleFollowSubmit(e) {
  e.preventDefault(); // 先阻止默认表单提交
  try {
    const formData = new FormData(e.target);
    await fetch(e.target.action, {
      method: 'POST',
      body: formData
    });
    toggleIsFollowing(); // 请求成功后再切换状态
  } catch (error) {
    console.error('关注失败:', error);
    // 这里可以添加用户可见的错误提示，比如弹出提示框
  }
}

// 取消关注的处理函数同理
async function handleUnfollowSubmit(e) {
  e.preventDefault();
  try {
    const formData = new FormData(e.target);
    await fetch(e.target.action, {
      method: 'POST',
      body: formData
    });
    toggleIsFollowing();
  } catch (error) {
    console.error('取消关注失败:', error);
  }
}

对应修改表单的提交事件绑定：

<form method="POST" action="?/followUser" on:submit={handleFollowSubmit}>
<!-- 关注按钮内容 -->
</form>

<form method="POST" action="?/unfollowUser" on:submit={handleUnfollowSubmit}>
<!-- 取消关注按钮内容 -->
</form>

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