如何使用.preventDefault()方法来阻止按钮点击事件

Question

给定这个教程 https://vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers

如下所示的代码中，我调用 .preventDefault 来期望取消 click 事件的正常行为。或者换句话说，我期望一旦调用了 .preventDefault，按钮将不再可点击，因为根据我的理解，.preventDefault 将禁用按钮的正常功能。

但是实际情况是，按钮仍然可点击，好像 .preventDefault 没有任何效果。

请告诉我如何正确使用 .preventDefault 来禁用按钮点击。

代码：

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

<script> 
    import {ref} from 'vue' 

    export default {
      name: 'App',
      components: {
        HelloWorld
      }
}
</script>
 
<script setup> 
    const warn = (msg,DOMEvent) => {
      console.log("warn:",msg," event:",DOMEvent);
      DOMEvent.preventDefault()
    }
</script>

Answer 1

preventDefault在以下情况下非常有用：

• 点击“提交”按钮时，阻止表单的提交
• 点击链接时，阻止链接跳转到URL

在您的情况下禁用按钮，您可以使用：

const warn = (msg,DOMEvent) => {
  DOMEvent.srcElement.disabled = true;
}

Answer 2

preventDefault()不会禁用按钮，但会阻止其默认操作，主要在Submit操作中会注意到。
要在点击时禁用按钮，你需要像这样做：

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

<script> 
    import {ref} from 'vue' 

    export default {
      name: 'App',
      components: {
        HelloWorld
      }
}
</script>
 
<script setup> 
    const warn = (msg,DOMEvent) => {
      console.log("warn:",msg," event:",DOMEvent);
      //DOMEvent.preventDefault() //uncomment if needed
      this.isDisabled = true;
    }
</script>