如何使用.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} 從 '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>