Các liên kết được sử dụng để kích hoạt các hàm JavaScript

Tôi nên sử dụng giá trị “href” nào cho các liên kết JavaScript, “#” hoặc “javascript: void (0)”?

Khi bạn đang tạo một ứng dụng bằng JavaScript thuần túy, đôi khi bạn cần phải kích hoạt một chức năng khi người dùng nhấp vào một liên kết.

Bạn thường có thể làm điều này theo 2 cách.

Giả sử hàm bạn muốn thực thi được gọi làhandleClick():

function handleClick() {
  alert('clicked')
}

Cách đầu tiên là sử dụng một liên kết như sau:

<a href="#" onclick="handleClick()">Click here</a>

Cách thứ hai là sử dụng

<a href="javascript:void(0)" onclick="handleClick()">Click here</a>

Cả hai đều có cú pháp rất giống nhau, điểm khác biệt duy nhất làhrefgiá trị thuộc tính.

Đầu tiên làhref="#", thứ hai làhref="javascript:void(0)". Bạn cũng có thể thấy cú pháp nàyhref="javascript:;", tương đương với thứ hai.

Bây giờ, sự khác biệt trong hành vi của 2 phương pháp đó là gì?

Khi người dùng nhấp vàohref="#"liên kết, bạnphảiđảm bảo rằng bạn trở lạifalsetừ trình xử lý sự kiện, nếu không thì trình duyệt sẽ cuộn trở lại đầu trang:

function handleClick() {
  alert('clicked')
  return false
}

Ngoài ra, ngay cả khi bạn thêm điều này nhưng JavaScript bị vô hiệu hóa hoặc không thực thi vì lý do nào đó, trình duyệt sẽ cuộn trở lại đầu trang. Điều này hầu như luôn luôn là điều cần tránh, vì vậy cá nhân tôi sẽ sử dụng biểu mẫu thứ hai,href="javascript:void(0)".

Theo cả hai cách,handleClick()hàm sẽ không được gọi nếu JavaScript bị tắt hoặc có lỗi trong JavaScript và do đó, việc thực thi JavaScript bị tạm dừng.

Để ngăn chặn điều này, bạn có thể sử dụng một URL thực tronghrefnhư một dự phòng, vì vậy trình duyệt sẽ di chuyển người dùng đến một trang cụ thể, sử dụng phương thức GET HTTP, mặc dù điều này không phải lúc nào cũng có thể thực hiện được hoặc thuận tiện.

Nhưng đó là một phương pháp hay nhất và các phương pháp hay nhất không phải lúc nào cũng thuận tiện, nhưng bạn phải tính đến chúng trong giai đoạn thiết kế ứng dụng của mình, bởi vì bạn không thể chỉ xây dựng cho trường hợp sử dụng lý tưởng và bỏ qua tất cả những thứ có thể xảy ra sai sót .

Nếu xảy ra sự cố, người dùng sẽ đổ lỗi cho bạn và các liên kết bị hỏng của bạn 🙂

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: