Lỗi Cấm Chuyển Hướng Liên Kết trong JavaScript

Giả sử chúng ta có một liên kết:

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

Lấy liên kết của chúng ta vào một biến:

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

Gắn một trình xử lý sự kiện click vào liên kết của chúng ta. Đồng thời, hủy bỏ việc chuyển hướng theo liên kết để tránh tải lại trang:

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

Có vẻ như chúng ta đã bảo vệ bản thân hoàn toàn khỏi hành vi không mong đợi. Trên thực tế thì không phải vậy. Vấn đề là, khi có lỗi cú pháp JavaScript, mã sẽ không được thực thi, hành động chặn liên kết sẽ không hoạt động, và việc chuyển hướng sẽ xảy ra.

Trong trường hợp này, chúng ta sẽ không thấy kết quả thực thi mã, cũng như không thấy lỗi trong console, vì trang sẽ được tải lại. Hãy cố tình tạo ra một lỗi trong mã và kiểm chứng trong thực tế:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // lỗi cú pháp
	event.preventDefault();
});

Vấn đề này có một dấu hiệu đặc trưng: nếu nhìn vào console tại thời điểm nhấp vào liên kết, chúng ta sẽ thấy trong chốc lát một lỗi màu đỏ trong console, và nó gần như biến mất ngay lập tức.

Tất nhiên, chúng ta sẽ không kịp đọc thông báo lỗi, điều này gây khó khăn đáng kể cho việc tìm kiếm nó. Tuy nhiên, có một mẹo khôn khéo. Cần đặt một dấu thăng vào href của liên kết. Trong trường hợp này, việc chuyển hướng theo liên kết sẽ không xảy ra và chúng ta sẽ thấy lỗi được ném ra console:

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