javascript:void(0) là một pseudo-protocol dùng trong thuộc tính href của thẻ <a> để ngăn chặn hành vi mặc định của liên kết (navigation/reload trang) khi click, đồng thời cho phép gán sự kiện JavaScript.
Phân tích thành phần
javascript:– Protocol handler, báo trình duyệt thực thi code JS tiếp theo.void– Toán tử một ngôi: đánh giá biểu thức và luôn trả vềundefined.0– Biểu thức đơn giản nhất (có thể là bất kỳ biểu thức nào:void(1),void(function(){...})).
Tại sao dùng?
Click me
Click me
Click me
Click me
Click me
Ví dụ từ bài gốc
<a href="javascript:void(0);" ondblclick="alert('Click it twice!')">
Click me not once, but twice.
</a>
Click lần 1: Không xảy ra gì (void(0) trả undefined, href không navigate).
Double-click: Kích hoạt ondblclick → alert.
Toán tử void chi tiết
void 0; // undefined
void (0); // undefined
void "hello"; // undefined
void (1 + 2); // undefined
void function() { return 42; }(); // undefined (function chạy nhưng kết quả bị bỏ)
console.log(void 0); // undefined
Tại sao KHÔNG nên dùng javascript:void(0) hiện nay?
| Vấn đề | Giải thích |
|---|---|
| Content Security Policy (CSP) | Thường chặn javascript: protocol – script không chạy. |
| Accessibility | Screen reader công bố là "link" nhưng không navigate – gây nhầm lẫn. |
| SEO | Bot không follow được "link" này. |
| Semantic HTML | <a> không có href hợp lệ không phải là link. |
| Security | XSS risk nếu inject được vào href. |
| UX | Không hiện preview URL khi hover, không mở tab mới được. |
Thay thế tốt nhất
<button type="button">– Đúng ngữ nghĩa cho hành động, accessible, style được bằng CSS.<a href="/real-url">+e.preventDefault()– Progressive enhancement: JS bật → chạy JS, JS tắt → navigate đến fallback URL.- Event Delegation – Gán 1 listener cho parent, kiểm tra
e.target.matches().
Khi nào buộc dùng?
Hiếm. Có thể trong: legacy codebase không thể refactor, bookmarklet, email HTML (client email hạn chế JS), prototype nhanh.