Inertia.js中如何阻止Link组件的双击触发问题

嘿，这个快速双击导致重复请求报错的问题我之前也踩过坑！尤其是这种DELETE操作，重复触发很容易出问题，给你几个实用的解决思路：

• 通过状态禁用按钮，阻止重复点击
  用一个响应式变量标记请求是否正在处理中，点击时先判断状态，如果正在处理就直接返回，同时把按钮设为禁用状态。举个Vue的例子：

  <template>
    <Link 
      :href="`/listing/${listing.id}`" 
      method="DELETE" 
      as="button" 
      preserve-state
      :disabled="isDeleting"
      @click="handleDelete"
    >
      Delete
    </Link>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { Link } from '@inertiajs/vue3'
  
  const isDeleting = ref(false)
  
  const handleDelete = () => {
    if (isDeleting.value) return
    isDeleting.value = true
    // 这里不用手动处理请求，Inertia的Link会自动发起
    // 但我们需要在请求结束后恢复状态，所以更推荐结合下面的全局事件监听
  }
  </script>
  

• 结合Inertia全局事件监听请求状态
  Inertia提供了start和finish全局事件，我们可以通过监听这两个事件来统一控制按钮的禁用状态，这样不管请求成功还是失败，都能正确恢复按钮状态：

  <template>
    <Link 
      :href="`/listing/${listing.id}`" 
      method="DELETE" 
      as="button" 
      preserve-state
      :disabled="isProcessing"
    >
      Delete
    </Link>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import { Link, router } from '@inertiajs/vue3'
  
  const isProcessing = ref(false)
  
  onMounted(() => {
    // 请求开始时标记为处理中
    router.on('start', () => isProcessing.value = true)
    // 请求结束（成功/失败）时恢复状态
    router.on('finish', () => isProcessing.value = false)
  })
  
  onUnmounted(() => {
    // 组件卸载时移除监听，避免内存泄漏
    router.off('start', () => isProcessing.value = true)
    router.off('finish', () => isProcessing.value = false)
  })
  </script>
  

• 额外加双击事件阻止（辅助方案）
  可以给Link组件加上@dblclick.prevent来阻止原生双击事件，不过这个只能防双击，对于快速连续点击两次的情况还是得靠状态禁用，所以建议和上面的方法配合使用：

  <Link 
    :href="`/listing/${listing.id}`" 
    method="DELETE" 
    as="button" 
    preserve-state
    :disabled="isProcessing"
    @dblclick.prevent
  >
    Delete
  </Link>
  

总的来说，最稳妥的就是结合状态禁用+Inertia全局事件监听，这样能从根源上阻止多次请求触发，不管用户怎么快速点击都不会有问题。

备注：内容来源于stack exchange，提问作者muhamude