Ralat Larangan Pautan dalam JavaScript

Katakan kita mempunyai pautan:

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

Dapatkan pautan kami dalam pembolehubah:

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

Lampirkan pengendali klik pada pautan kami. Batalkan peralihan melalui pautan untuk mengelakkan pemuatan semula halaman:

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

Nampaknya kita telah melindungi diri sepenuhnya dari tingkah laku yang tidak dijangka. Sebenarnya, ini tidak benar. Masalahnya ialah jika ralat sintaks JavaScript berlaku, kod tidak akan dilaksanakan, sekatan pautan tidak akan berfungsi, dan peralihan melalui pautan akan berlaku.

Dalam kes ini, kita tidak akan melihat hasil pelaksanaan kod atau ralat dalam konsol, kerana halaman akan dimuat semula. Mari sengaja membuat ralat dalam kod dan mengujinya secara praktikal:

link.addEventListener('click', function(event) {
	thiss.textContent = 'teks'; // ralat sintaks
	event.preventDefault();
});

Masalah ini mempunyai tanda ciri: jika anda melihat konsol pada saat klik pada pautan, kita akan melihat ralat merah dalam konsol untuk seketika, yang hampir serta-merta akan hilang.

Sudah tentu, kita tidak akan sempat membaca teks ralat, yang sangat menyukarkan pencariannya. Namun, terdapat satu helah licik. Anda perlu meletakkan tanda pagar dalam href pautan. Dalam kes ini, peralihan melalui pautan tidak akan berlaku dan kita akan melihat ralat yang dilontar dalam konsol:

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