Việc sử dụng javascript:void(0) trong thiết kế web, ngoài các trường hợp kỹ thuật đặc thù, thường là một dấu hiệu cho thấy tác giả đang đi sai hướng.
Không có lý do chính đáng để sử dụng URL giả javascript:void(0). Thực tế, nó gây ra nhầm lẫn và trải nghiệm không tốt cho người dùng, đặc biệt khi họ cố gắng sử dụng các chức năng quen thuộc như “mở liên kết trong tab mới” hoặc “lưu liên kết vào dấu trang”. Hành vi này càng trở nên khó chịu khi người dùng đã quen với việc nhấp chuột giữa để mở liên kết trong tab mới. Thay vì mở một trang mới, họ có thể gặp phải một trang trắng hoặc lỗi JavaScript.
Một lựa chọn phổ biến khác là sử dụng #, tuy nhiên, cách này vẫn có nhược điểm. Để ngăn trình duyệt theo liên kết và cuộn lên đầu trang, bạn cần thêm return false vào trình xử lý sự kiện onclick.
<a href="#" onclick="yourJavaScriptFunction(); return false;">Click Me</a>Trong một số tình huống nhất định, việc liên kết đến một phần tử cụ thể trên trang có thể hữu ích. Ví dụ, nếu bạn có một phần tử ban đầu bị ẩn và chỉ hiển thị khi người dùng nhấp vào một liên kết, bạn có thể sử dụng <a href="#elementId"> để liên kết trực tiếp đến phần tử đó. Hoặc, nếu có một giải pháp không sử dụng JavaScript để đạt được kết quả tương tự (ví dụ: sử dụng thispage.php?show=foo để hiển thị phần foo), bạn nên ưu tiên giải pháp này.
Tuy nhiên, nếu một liên kết chỉ đơn thuần kích hoạt một đoạn mã JavaScript, nó thực sự không phải là một liên kết thực sự và không nên được đánh dấu như vậy. Thay vào đó, bạn có thể sử dụng các thẻ như <button>, <span>, hoặc <div> và thêm thuộc tính onclick để kích hoạt mã JavaScript. Bạn cũng có thể tạo kiểu cho các phần tử này để chúng trông giống như liên kết.
Alt text: Nút HTML được tùy chỉnh giao diện bằng CSS để trông giống như một liên kết, minh họa cách thay thế thẻ trong một số trường hợp.
Stack Overflow (vào thời điểm bài viết gốc được viết) đã sử dụng phương pháp này. Tuy nhiên, cách tiếp cận này có một nhược điểm: bạn mất khả năng điều khiển bằng bàn phím. Người dùng không thể sử dụng phím Tab để di chuyển đến phần tử và kích hoạt nó bằng phím Space. Mức độ nghiêm trọng của nhược điểm này phụ thuộc vào chức năng của phần tử.
Bạn có thể cố gắng mô phỏng khả năng tương tác bằng bàn phím bằng cách thêm thuộc tính tabIndex vào phần tử và lắng nghe sự kiện nhấn phím Space. Tuy nhiên, việc này không thể tái tạo hoàn toàn hành vi trình duyệt gốc, đặc biệt là vì các trình duyệt khác nhau có thể phản ứng khác nhau với bàn phím, chưa kể đến các trình duyệt không trực quan.
Nếu bạn thực sự muốn một phần tử không phải là liên kết nhưng vẫn có thể được kích hoạt bằng chuột hoặc bàn phím, thì thẻ <button> là lựa chọn phù hợp.
javascript: URL giả là một khái niệm kỳ lạ: một công cụ định vị không trỏ đến một vị trí cụ thể, mà thay vào đó gọi mã hoạt động bên trong vị trí hiện tại. Nó tạo ra các vấn đề bảo mật cho cả trình duyệt và ứng dụng web, và thực tế là nó đáng lẽ không nên được phát minh ra.
Tóm lại: Tránh sử dụng javascript:void(0) khi tạo trang web. Hãy cân nhắc các lựa chọn thay thế phù hợp hơn để đảm bảo trải nghiệm người dùng tốt và khả năng truy cập tốt hơn. Ưu tiên sử dụng các thẻ HTML phù hợp với mục đích của bạn và đảm bảo rằng trang web của bạn có thể được sử dụng một cách dễ dàng bằng cả chuột và bàn phím.