Question 171805 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can I prevent button clicks with .preventDefault() in Javascript?

given this tutorial https://vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers

as shown below in the code, i am calling .preventDefault expecting cancellation of the normal behaviour of the click emitter. Or, in other words, i expect that once . preventDefault is called the button will not be any more clickable because i think, according to my understanding,
.preventDefault will disable the normal fucntionality of the button.

but what happens, is that the buttonn is still clickable and as if .preventDefault has no effect.

please let me know how to disable button clicks by using .preventDefault properly

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

4

Answers


  1. 0

    event.preventDefault() stops the current event from triggering other listeners or acting on the page, essentially intercepting and killing that event.

    To disable a button, you can set its disabled attribute to true.

    button.addEventListener('click', () => {
 button.disabled = true;
 button.textContent = 'Cant touch this';
})
    <button id="button">Click Me</button>
    Login or Signup to reply.
  2. 0

    preventDefault() doesn’t disable the button but prevents its default action mainly you will notice in case of Submit action.

    To disable 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>
    Login or Signup to reply.
  3. 0

    preventDefault can be useful when:

    • Clicking on a "Submit" button, prevent it from submitting a form
    • Clicking on a link, prevent the link from following the URL

    To disable your button in your case, you can use:

      const warn = (msg,DOMEvent) => {
  DOMEvent.srcElement.disabled = true;
}
    Login or Signup to reply.
  4. 0

    Doesn’t seem like you’re using the preventDefault method correctly.

    Read up on the MDN Event.preventDefault() docs for a better take on how to use it.

    First off, to disable a button, you can simply use the disabled attribute

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

    Ideally, you’ll probably want to only disable it conditionally by using the v-bind: directive.

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

        <!-- A new button to toggle disabled state -->
        <button v-on:click="toggleDisabledState">Toggle</button> 
    </div>
</template>
... 

<script setup>
    import {ref} from 'vue'

    const isDisabled = ref(false);

    const warn = (msg,DOMEvent) => {
      console.log("warn:",msg," event:",DOMEvent);
    }

    // toggle method
    const toggleDisabledState = () => {
      isDisabled.value = !isDisabled.value
    } 
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search