Comment utiliser la méthode .preventDefault() pour empêcher l'événement de clic sur le bouton
P粉254077747
2023-09-01 20:04:07
<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>
preventDefault est utile dans les situations suivantes :
Pour désactiver le bouton dans votre cas, vous pouvez utiliser :
preventDefault()
不会禁用按钮,但会阻止其默认操作,主要在Submit
Vous le remarquerez pendant le fonctionnement.Pour désactiver un bouton lors d'un clic, vous devez faire quelque chose comme ceci :