How to use .preventDefault() method to prevent button click event

Question

Given this tutorialhttps:// vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers

In the code shown below, I call .preventDefault to expect the normal behavior of canceling the click event. Or in other words, I expect that once .preventDefault is called, the button will no longer be clickable because from my understanding, .preventDefault will disable the button's normal functionality .

But what happens is that the button is still clickable, as if .preventDefault has no effect.

Please tell me how to properly use .preventDefault to disable button clicks.

Code:

<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 is useful in the following situations:

• Prevent form submission when clicking the "Submit" button
• When a link is clicked, prevent the link from jumping to the URL

To disable the button in your case you can use:

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

Answer 2

preventDefault() will not disable the button, but will prevent its default action, which will be mainly noticed in the Submit action.
To disable a button on click, you need to do something like this:

<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>