Lỗi chuyển hướng theo liên kết trong JavaScript

Hãy cùng phân tích lỗi liên quan đến việc chuyển hướng theo liên kết không mong muốn. Giả sử chúng ta có liên kết sau đây làm ví dụ:

<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 nhấp chuột vào liên kết của chúng ta:

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

Và đây là nơi chúng ta gặp phải điều bất ngờ. Mã được viết đúng, tuy nhiên, đầu ra không xuất hiện trong console. Vấn đề là khi nhấp chuột, trình duyệt thực hiện chuyển hướng theo liên kết. Vì không có gì được chỉ định trong thuộc tính href, nên liên kết chỉ dẫn đến trang hiện tại.

Điều này có nghĩa là việc nhấp vào liên kết dẫn đến việc tải lại trang. Tức là dữ liệu của chúng ta được xuất ra console, sau đó trang được tải lại, và console trở nên trống rỗng.

Nếu quan sát kỹ, bạn có thể thấy rằng tại thời điểm nhấp chuột, dữ liệu xuất hiện trong console trong chốc lát, rồi biến mất. Đây chính là dấu hiệu đặc trưng của lỗi này.

Hãy xem cách chúng ta có thể giải quyết vấn đề này.

Giải pháp thứ nhất

Trong thuộc tính href của liên kết cần đặt dấu thăng (#). Điều này sẽ làm cho liên kết trỏ đến một vị trí cụ thể trên trang hiện tại và khi nhấp vào liên kết sẽ không có việc tải lại trang. Hãy thực hiện điều đó:

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

Giải pháp thứ hai

Một cách tiên tiến hơn là hủy hành động mặc định bằng phương thức preventDefault:

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