Cara menggunakan kaedah .preventDefault() untuk menghalang peristiwa klik butang

Question

Memandangkan tutorial inihttps:// vuejs. org/guide/essentials/event-handling.html#accessing-event-argument-in-in-line-handlers

Dalam kod yang ditunjukkan di bawah, saya memanggil .preventDefault Atau dengan kata lain, saya menjangkakan bahawa sebaik sahaja .preventDefault dipanggil, butang itu tidak lagi boleh diklik kerana dari pemahaman saya, .preventDefault .

Tetapi apa yang berlaku ialah butang itu masih boleh diklik, seolah-olah .preventDefault

Sila beritahu saya cara menggunakan .preventDefault untuk melumpuhkan klik butang.

Kod:

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

<skrip>
    import {ref} daripada 'vue'

    eksport lalai {
      nama: 'App',
      komponen: {
        Hai dunia
      }
}
</skrip>
 
<persediaan skrip>
    const warn = (msg,DOMEvent) =>
      console.log("amaran:",msg," acara:",DOMEvent);
      DOMEvent.preventDefault()
    }
</script>

Answer 1

preventDefault berguna dalam situasi berikut:

• Halang penyerahan borang apabila mengklik butang "Serah"
• Halang pautan daripada melompat ke URL apabila anda mengklik padanya

Untuk melumpuhkan butang dalam kes anda, anda boleh menggunakan:

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

Answer 2

preventDefault()不会禁用按钮，但会阻止其默认操作，主要在SubmitAnda akan perasan semasa operasi.
Untuk melumpuhkan butang pada klik anda perlu melakukan sesuatu seperti ini:

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