Comment utiliser la méthode .preventDefault() pour empêcher l'événement de clic sur le bouton

Question

Compte tenu de ce tutorielhttps:// vuejs. org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers

Dans le code ci-dessous, j'appelle .preventDefault pour m'attendre au comportement normal d'annulation de l'événement click Ou en d'autres termes, je m'attends à ce qu'une fois que .preventDefault soit appelé, le bouton ne sera plus cliquable car, d'après ma compréhension, .preventDefault .

Mais ce qui se passe, c'est que le bouton est toujours cliquable, comme si .preventDefault

Veuillez me dire comment utiliser correctement .preventDefault

Code :

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

<script>
    importer {ref} depuis 'vue'

    exporter par défaut {
      nom : « Application »,
      Composants: {
        Bonjour le monde
      }
}
</script>
 
<configuration du script>
    const warn = (msg,DOMEvent) =>
      console.log("warn:", msg, " event:", DOMEvent);
      DOMEvent.preventDefault()
    }
</script>

Answer 1

preventDefault est utile dans les situations suivantes :

• Empêcher l'envoi du formulaire en cliquant sur le bouton "Envoyer"
• Empêcher le lien d'accéder à l'URL lorsque vous cliquez dessus

Pour désactiver le bouton dans votre cas, vous pouvez utiliser :

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

Answer 2

preventDefault()不会禁用按钮，但会阻止其默认操作，主要在SubmitVous le remarquerez pendant le fonctionnement.
Pour désactiver un bouton lors d'un clic, vous devez faire quelque chose comme ceci :

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