Ralat Pautan Beralih dalam JavaScript

Mari kita analisis ralat yang berkaitan dengan pautan beralih secara tidak dijangka. Sebagai contoh, katakan kita mempunyai pautan berikut:

<a href="">pautan</a>

Dapatkan pautan kami dalam pembolehubah:

let link = document.querySelector('a');

Lampirkan pengendali klik ke pautan kami:

link.addEventListener('click', function() {
	console.log(this.textContent);
});

Dan di sinilah kita akan terkejut. Kod ditulis dengan betul, namun, output tidak muncul dalam konsol. Masalahnya ialah apabila diklik, berlaku peralihan melalui pautan. Oleh kerana dalam atribut href tiada apa dinyatakan, maka pautan hanya menuju ke halaman semasa.

Ini bermakna klik pada pautan membawa kepada penyegaran semula halaman. Iaitu data kami dipaparkan dalam konsol, kemudian halaman disegarkan semula, dan konsol menjadi kosong.

Jika diperhatikan dengan teliti, kita boleh melihat bagaimana pada saat klik data muncul dalam konsol seketika, kemudian hilang. Inilah ciri-ciri ralat ini.

Mari kita lihat bagaimana kita boleh menyelesaikan masalah ini.

Penyelesaian pertama

Dalam href pautan perlu diletakkan tanda pagar. Ini akan menyebabkan pautan merujuk ke lokasi tertentu pada halaman semasa dan apabila diklik pada pautan tidak akan berlaku penyegaran semula. Mari lakukan ini:

<a href="#">pautan</a>

Penyelesaian kedua

Kaedah yang lebih maju ialah membatalkan tindakan lalai menggunakan kaedah preventDefault:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});