Kesalahan Pelarangan Mengikuti Tautan di JavaScript

Misalkan kita memiliki sebuah tautan:

<a href="">link</a>

Dapatkan tautan kita ke dalam variabel:

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

Mari kita lampirkan penangan klik ke tautan kita. Pada saat yang sama, kita akan membatalkan pergi ke tautan untuk menghindari pemuatan ulang halaman:

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

Tampaknya kita telah sepenuhnya melindungi diri kita sendiri dari perilaku tak terduga. Sebenarnya, hal ini tidak benar. Masalahnya adalah bahwa jika terjadi kesalahan sintaks, kode JavaScript tidak akan dijalankan, pemblokiran tautan tidak akan bekerja, dan pergi ke tautan akan terjadi.

Dalam kasus ini, kita tidak akan melihat hasil eksekusi kode maupun kesalahan di konsol, karena halaman akan dimuat ulang. Mari kita sengaja membuat kesalahan dalam kode dan buktikan dalam praktik:

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

Masalah seperti ini memiliki tanda karakteristik: jika kita melihat ke konsol pada saat mengklik tautan, kita akan melihat kesalahan merah di konsol untuk sesaat, yang hampir segera menghilang.

Tentu saja, kita tidak akan punya waktu untuk membaca teks kesalahannya, yang sangat menyulitkan pencariannya. Namun, ada trik licik. Kita perlu meletakkan tanda pagar di href tautan. Dalam hal ini, pergi ke tautan tidak akan terjadi dan kita akan melihat kesalahan yang dilemparkan ke konsol:

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