Tại sao cần vô hiệu hoá tải lại trang
Theo mặc định, thẻ <a> khi bấm vào sẽ reload lại page khiến người dùng khó chịu, nếu như trong cùng 1 trang hoặc “href=#”. Hoặc đơn giản bạn chỉ muốn dùng thẻ <a> nhưng ko muốn chuyển hướng, điều này xảy ra khá nhiều trong khi code web.
<a href="#" class="no-reload">Link</a>Dùng HTML
Bạn có thể thử 1 số cách sau:
Đơn giản là không chỉ định thuộc tính href
- không tải lại một trang khi nhấp chuột
- không thay đổi con trỏ thành pointer khi di chuột
- không thay đổi kiểu văn bản thành underlined
<a class="no-reload">Link</a>Điều này cũng sẽ hiệu quả khi dẫn đến 1 lệnh javascript rỗng là không thực hiện bất kì điều gì.
<a href="javascript:void(0)" class="no-reload">Link</a><a href="javascript:;" class="no-reload">Link</a>Điều này sẽ ngăn việc tải lại trang của bạn bằng cách disable thuộc tính onclick.
<a href="#" onclick="return false;" class="no-reload">Link</a>Dùng Javascript
Bạn có thể dùng javascript để ngăn hành vi mặc định của thẻ a (link, underline, reload, pointer,…)
document.querySelector('.no-reload').onclick(function (event) {
event.preventDefault();
});Điều này cũng có kết quả tương tự
document.querySelector('.no-reload').onclick(function (event) {
return false;
});Dùng CSS
Cách này khá là hay khi bạn không có quyền sửa đổi HTML hay mất công chỉnh sửa JS.
.no-reload {
pointer-events: none;
}