如何通过.preventDefault()正确禁用按钮点击？

event.preventDefault() 对按钮的 click 事件无效，是因为按钮点击本身没有浏览器默认行为——这个方法的作用是阻止浏览器自带的默认动作（比如 <a> 标签跳转、<form> 表单提交），但没法阻止点击事件触发，也不能直接禁用按钮。

要实现按钮无法点击的效果，推荐以下两种方式：

方法一：使用按钮原生 disabled 属性（最可靠） #

通过绑定响应式变量控制按钮的禁用状态，这是HTML按钮本身的功能，视觉和交互上都会体现禁用效果。

修改后的代码示例：

<template>
  <div>
      <button v-on:click="warn('msg',$event)" :disabled="isBtnDisabled">warn</button>     
  </div>
</template>

<script> 
import {ref} from 'vue' 

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
 
<script setup> 
import { ref } from 'vue'
// 定义响应式变量控制禁用状态
const isBtnDisabled = ref(false)

const warn = (msg,DOMEvent) => {
  console.log("warn:",msg," event:",DOMEvent);
  // 设置按钮为禁用状态
  isBtnDisabled.value = true
}
</script>

方法二：仅阻止点击后的逻辑执行（不视觉禁用） #

如果只是不想让点击后的代码执行，但保留按钮的可点击外观，可以在事件函数里加条件判断，提前终止执行：

<script setup> 
const warn = (msg,DOMEvent) => {
  // 自定义判断条件，满足则不执行后续逻辑
  if (true) {
    console.log("点击被拦截，不执行后续操作");
    return
  }
  console.log("warn:",msg," event:",DOMEvent);
}
</script>

注意：这种方式按钮仍能被点击，只是点击后没有预期的逻辑执行，适合不需要视觉禁用的场景。

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