stopPropagation() vs. preventDefault(): Bagaimanakah Kaedah Peristiwa Ini Berbeza?

Penyebaran Acara dan Pencegahan Tindakan Lalai

Memahami perbezaan antara event.stopPropagation() dan event.preventDefault() adalah penting apabila mengendalikan acara secara manual. Kedua-dua kaedah ini mempunyai fungsi yang berbeza dalam mengawal penyebaran peristiwa dan menghalang pelaksanaan tindakan penyemak imbas lalai.

stopPropagation

event.stopPropagation() campur tangan dalam penyebaran acara melalui DOM. Apabila dicetuskan, ia menghentikan pengedaran acara kepada elemen induk dan peringkat lebih tinggi, kedua-dua semasa fasa menangkap dan menggelegak. Ini berguna apabila anda ingin menghalang acara daripada menggelegak kepada elemen induk, yang berpotensi mengganggu pengendali acara berikutnya.

preventDefault

event.preventDefault() mengganggu tingkah laku lalai yang dikaitkan dengan peristiwa pencetus. Sebagai contoh, mengklik pada hiperpautan biasanya menavigasi ke URL baharu. event.preventDefault() boleh menghalang tindakan lalai ini daripada berlaku. Kaedah ini tidak menghalang acara daripada disebarkan dalam DOM.

Penggunaan

Dalam kebanyakan senario, anda tidak perlu menyemak kedua-dua kaedah. Sebaliknya, anda harus menggunakan kaedah khusus yang selaras dengan hasil yang anda inginkan:

• Gunakan stopPropagation() apabila anda ingin menghalang acara daripada mencapai elemen induk.
• Gunakan preventDefault() apabila anda ingin menyekat tindakan lalai yang dikaitkan dengan acara.

Contoh

Pertimbangkan contoh berikut apabila mengklik butang memanggil preventDefault():

<script>
  $("#button").click(function(event) {
    event.preventDefault();
  });
</script>

<button></button>

Apabila diklik, butang akan menghalang tindakan lalai menavigasi ke yang baharu URL.

Kesimpulan

stopPropagation() dan preventDefault() ialah kaedah berbeza yang mengawal penyebaran peristiwa dan tindakan lalai penyemak imbas. Memahami perbezaan antara mereka memperkasakan anda untuk mengendalikan acara dengan berkesan dan menyesuaikan tingkah laku mengikut keperluan anda.

Atas ialah kandungan terperinci stopPropagation() vs. preventDefault(): Bagaimanakah Kaedah Peristiwa Ini Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!