So verwenden Sie die Methode .preventDefault(), um ein Schaltflächenklickereignis zu verhindern

Question

Angesichts dieses Tutorialshttps:// vuejs. org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers

Im unten gezeigten Code rufe ich .preventDefault auf, um das normale Verhalten des Abbruchs des click-Ereignisses zu erwarten. Mit anderen Worten: Ich erwarte, dass die Schaltfläche nach dem Aufruf von .preventDefault nicht mehr anklickbar ist, da .preventDefault meines Erachtens die normale Funktionalität der Schaltfläche deaktiviert .

Aber was passiert, ist, dass die Schaltfläche immer noch anklickbar ist, als ob .preventDefault keine Wirkung hätte.

Bitte erklären Sie mir, wie ich .preventDefault richtig verwende, um Schaltflächenklicks zu deaktivieren.

Code:

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

<script>
    {ref} aus 'vue' importieren

    Standard exportieren {
      Name: 'App',
      Komponenten: {
        Hallo Welt
      }
}
</script>
 
<Skript-Setup>
    const warn = (msg,DOMEvent) =>
      console.log("warn:",msg," event:",DOMEvent);
      DOMEvent.preventDefault()
    }
</script>

Answer 1

preventDefault在以下情况下非常有用：

• 点击“提交”按钮时，阻止表单的提交
• 点击链接时，阻止链接跳转到URL

在您的情况下禁用按钮，您可以使用：

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

Answer 2

preventDefault()不会禁用按钮，但会阻止其默认操作，主要在Submit操作中会注意到。
要在点击时禁用按钮，你需要像这样做：

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