Comment utiliser la méthode .preventDefault() pour empêcher l'événement de clic sur le bouton
P粉254077747
P粉254077747 2023-09-01 20:04:07
0
2
565
<p>Compte tenu de ce tutoriel<a href="https://vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers">https:// vuejs. org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers</a></p> <p>Dans le code ci-dessous, j'appelle <code>.preventDefault</code> pour m'attendre au comportement normal d'annulation de l'événement <code>click</code> Ou en d'autres termes, je m'attends à ce qu'une fois que <code>.preventDefault</code> soit appelé, le bouton ne sera plus cliquable car, d'après ma compréhension, <code>.preventDefault</code> . </p> <p>Mais ce qui se passe, c'est que le bouton est toujours cliquable, comme si <code>.preventDefault</code> </p> <p>Veuillez me dire comment utiliser correctement <code>.preventDefault</code> </p> <p><strong>Code</strong> : </p> <pre class="brush:php;toolbar:false;"><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></pre></p>
P粉254077747
P粉254077747

répondre à tous(2)
P粉002023326

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;
}
P粉726234648

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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal