Saat memperbarui halaman web atau situs web, ada situasi di mana beberapa tautan yang disertakan tidak lagi diperlukan atau menjadi tidak relevan. Selain itu, mengelola lalu lintas situs web tertentu secara efektif. Dalam kasus seperti itu, membatalkan acara dalam JavaScript sangat membantu dalam menonaktifkan beberapa fungsi dan menangani skenario kasus tersebut.
Bagaimana Cara Membatalkan Acara di JavaScript?
Pendekatan berikut dapat digunakan untuk membatalkan acara di JavaScript:
-
- “ mencegahDefault() ' metode.
- “ Nilai Boolean ' mendekati.
- “ berhentiPropagasi() ' metode.
Pendekatan 1: Batalkan Acara dalam JavaScript Menggunakan Metode preventDefault()
' mencegahDefault() ” metode membatalkan acara terlampir jika dapat dibatalkan. Metode ini dapat digunakan untuk melepaskan acara terlampir dari tautan yang diakses sehingga mencegah tindakan yang akan dilakukan.
Sintaksis
event.preventDefault ( )
Dalam sintaks yang diberikan:
-
- “ peristiwa ” mengacu pada peristiwa yang akan dipisahkan.
Contoh
Buka cuplikan kode yang diberikan di bawah ini:
< h3 > Acara Klik akan dibatalkan ! h3 >
< sebuah Indo = 'lokasi' href = 'https://www.google.com/' > Kunjungi Situs Web Google sebuah >
document.getElementById ( 'lokasi' ) .addEventListener ( 'klik' , fungsi ( membatalkan ) {
batal.preventDefault ( ) ;
} ) ;
Ikuti langkah-langkah yang disebutkan di bawah ini:
-
- Pertama, sertakan judul yang disebutkan untuk ditampilkan pada Model Objek Dokumen (DOM).
- Setelah itu tentukan “ URL ' menggunakan ' href ” atribut.
- Sekarang, di bagian JavaScript dari kode, akses URL yang ditentukan.
- Juga, lampirkan “ klik ” dengan URL dengan bantuan fungsi menggunakan “ tambahkanEventListener() ' metode.
- Akhirnya, “ mencegahDefault() Metode ” akan diterapkan dengan bantuan parameter fungsi untuk melepaskan event yang dilampirkan.
Keluaran
Pendekatan 2: Batalkan Acara di JavaScript dengan Mengembalikan Nilai Boolean
Pendekatan ini dapat dilaksanakan dengan mengembalikan “ Salah ” nilai boolean pada peristiwa yang dipicu.
Contoh
Baris kode berikut menunjukkan konsep yang dinyatakan:
< tengah >< memasukkan Tipe = 'teks' tempat penampung = 'Masukkan teks' masukan = 'batalkan acara()' > tengah >fungsi batalkan acara ( ) {
kembali Salah ;
peringatan ( 'Pernyataan ini tidak akan ditampilkan' )
}
Dalam cuplikan kode di atas:
-
- Pertama, dalam “
”, mengalokasikan bidang teks input. - Juga, lampirkan “ masukan ” acara dengan “ yang ditentukan” tempat penampung ' nilai. Ini akan menghasilkan pemanggilan fungsi yang ditentukan saat memasukkan teks.
- Sekarang, di bagian JavaScript dari kode, nyatakan sebuah fungsi bernama “ batalkanAcara() ”. Dalam definisinya, kembalikan nilai boolean “ Salah ” untuk membatalkan yang disertakan “ peristiwa ”.
- Terakhir, tentukan pesan yang dinyatakan di kotak peringatan. Nilai boolean yang dikembalikan akan mengakibatkan kotak dialog tidak ditampilkan.
- Pertama, dalam “
Keluaran
Pada output di atas, dapat diamati bahwa pada fungsi yang diakses, kotak dialog peringatan tidak ditampilkan sehingga membatalkan acara yang dilampirkan.
Pendekatan 3: Batalkan Acara dalam JavaScript Menggunakan Metode stopPropagation()
' berhentiPropagasi() ” mencegah event yang sama untuk disebarkan. Metode ini dapat digunakan untuk menghentikan propagasi antara dua div setelah mencentang kotak centang.
Sintaksis
event.stopPropagation ( )
Contoh
Perhatikan baris kode berikut:
< tengah >< h3 > Klik Website untuk melihat perubahannya: h3 >< div klik = 'elemen2()' > Linux
< div klik = 'elemen1(peristiwa)' > Situs web div >
div >
< br >
Centang untuk Menghentikan Propagasi:
< memasukkan Tipe = 'kotak centang' Indo = 'memeriksa' >
tengah >
-
- Pada langkah pertama, dengan cara yang sama, sertakan judul yang disebutkan.
- Sekarang, sertakan dua ' div ” tag dengan terlampir “ klik ” dengan masing-masing menjalankan dua fungsi berbeda element2() dan element1().
- Juga, sertakan kotak centang dengan id yang ditentukan. Kotak centang ini akan mengakibatkan penghentian propagasi antara dua div.
Sekarang, lihat baris kode JavaScript berikut:
fungsi elemen1 ( dan ) {peringatan ( 'Anda Mengklik Situs Web' ) ;
jika ( document.getElementById ( 'memeriksa' ) .diperiksa ) {
e.stopPropagation ( ) ;
}
}
fungsi elemen2 ( ) {
peringatan ( 'Anda Mengklik Linuxhint' ) ;
}
Dalam kode js di atas:
-
- Tentukan fungsi bernama “ elemen1() ”. Di sini, parameter “ dan ' mengacu kepada ' peristiwa ” dipecat ditentukan di bagian HTML dari kode.
- Dalam definisinya, tampilkan kotak dialog peringatan yang berisi pesan yang dinyatakan.
- Setelah itu, akses kotak centang yang dibuat dengan id-nya menggunakan ' getElementById() ' metode. Juga, terapkan ' diperiksa ” properti itu untuk memeriksa kondisi kotak centang yang dicentang.
- Kemudian, terapkan ' berhentiPropagasi() ” metode mengacu pada parameter “ dan ”. Ini akan mengakibatkan penghentian propagasi dari satu fungsi ke fungsi lainnya.
- Demikian pula, tentukan fungsi lain “ elemen2() ” untuk disebarkan. Fungsi ini akan berfungsi sebelum propagasi saja.
Keluaran
Di sini, amati perilaku saat mengklik div saat mencentang kotak centang.
Kami telah menyusun pendekatan untuk membatalkan acara di JavaScript.
Kesimpulan
' mencegahDefault() metode ”, nilai boolean ” pendekatan, atau ” berhentiPropagasi() Metode ” dapat digunakan untuk membatalkan acara di JavaScript. Metode pertama dapat diterapkan untuk melepaskan acara terlampir yang mengakibatkan penonaktifan tautan. Pendekatan nilai boolean mengembalikan “ Salah ” nilai boolean pada peristiwa yang dipicu. Metode stopPropagation() dapat diterapkan untuk menghentikan propagasi antara dua div dengan bantuan kotak centang yang disertakan. Tutorial ini menjelaskan untuk membatalkan acara di JavaScript.