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;
}

Leave a Reply

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.
x  Powerful Protection for WordPress, from Shield Security
This Site Is Protected By
Shield Security