JScript Katana

“javascript:void(0)” là gì? Hướng dẫn toàn diện về ý nghĩa, cách sử dụng và các thực tiễn tốt nhất

Hàm tiện ích khác
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Giới thiệu – “javascript:void(0)” Là Gì?

Khi học JavaScript, bạn có thể gặp phải ký hiệu “javascript:void(0)” trong mã. Thoạt nhìn, nó có thể khó hiểu. Tuy nhiên, đây là một trong những kỹ thuật hữu ích để kiểm soát hành vi trang và quản lý xử lý sự kiện. Bài viết này giải thích rõ ràng ý nghĩa, mục đích và cách sử dụng của “javascript:void(0)”. Nó cũng bao gồm các lưu ý quan trọng và các lựa chọn thay thế hiện đại.

1-1. Câu Hỏi Thường Gặp: “javascript:void(0)” Có Ý Nghĩa Gì?

“javascript:void(0)” là một ký hiệu được sử dụng để ngăn chặn hành vi mặc định của liên kết hoặc nút và thay vào đó thực thi JavaScript tùy chỉnh. Thông thường, thẻ HTML <a> sẽ điều hướng đến trang đích khi được nhấp. Nhưng khi bạn muốn liên kết hoạt động như một nút mà không điều hướng đến đâu, “javascript:void(0)” trở nên hữu ích. Ví dụ:

<a href="javascript:void(0);">Click</a>

Nhấp vào liên kết này không làm gì cả. Bạn có thể gắn xử lý sự kiện JavaScript của riêng mình thay vào đó.

1-2. Thách Thức Của Người Đọc Và Mục Đích Của Bài Viết

Khi thêm xử lý sự kiện tùy chỉnh vào các trang web, có nhiều cách để kiểm soát liên kết và nút. Tuy nhiên, “javascript:void(0)” có thể gây nhầm lẫn cho người mới bắt đầu và có thể ảnh hưởng đến SEO hoặc khả năng tiếp cận nếu sử dụng sai. Bài viết này bao gồm các chủ đề sau để bạn có thể hiểu và sử dụng nó đúng cách:

  1. Khái niệm cơ bản và cách triển khai của “javascript:void(0)”
  2. Các lưu ý và nhược điểm
  3. Các lựa chọn thay thế an toàn và hiện đại hơn

Với kiến thức này, bạn sẽ có thể xây dựng các ứng dụng web hiện đại và hiệu quả hơn.

2. Khái Niệm Cơ Bản Của “javascript:void(0)”

“javascript:void(0)” là một loại biểu thức JavaScript được sử dụng chủ yếu để vô hiệu hóa hành vi mặc định của liên kết hoặc nút. Phần này giải thích cách toán tử void hoạt động và “void(0)” thực sự có nghĩa là gì.

2-1. Ý Nghĩa Của Toán Tử “void”

Trong JavaScript, toán tử “void” không trả về gì (undefined). Thông thường, các biểu thức JavaScript trả về một giá trị, nhưng “void” buộc kết quả phải là undefined. Nó chủ yếu được sử dụng để bỏ qua kết quả đánh giá trong khi thực hiện các hiệu ứng phụ. Ví dụ cơ bản:

console.log(void(0)); // Output: undefined

Điều này xác nhận rằng void(0) trả về undefined.

2-2. “void(0)” Đại Diện Cho Điều Gì

“void(0)” đại diện cho “không làm gì”. Nó đánh giá thành undefined, ngăn chặn điều hướng trang trong khi cho phép hành vi nhấp tùy chỉnh của bạn. Ví dụ:

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

Liên kết này không điều hướng nhưng kích hoạt một cảnh báo.

2-3. Tại Sao Sử Dụng “javascript:void(0)”

Các lý do chính bao gồm:

  1. Vô hiệu hóa điều hướng liên kết Ngăn chặn tải lại trang trong khi xử lý các sự kiện nhấp tùy chỉnh.
  2. Sử dụng như một liên kết chết Hữu ích như một placeholder trong quá trình phát triển.
  3. Đơn giản và dễ triển khai Cú pháp thân thiện với người mới bắt đầu.

3. Các Ví Dụ Sử Dụng Và Triển Khai

Phần này giải thích các ví dụ sử dụng thực tế của “javascript:void(0)” từ các đoạn mã cơ bản đến các tình huống ứng dụng.

3-1. Ví Dụ Mã Cơ Bản

<a href="javascript:void(0);">Link</a>

Liên kết này không làm gì khi được nhấp.

3-2. Tùy Chỉnh Sự Kiện Nhấp

Ví dụ 1: Hiển Thị Cảnh Báo

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

3-3. Ví Dụ Dựa Trên Tình Huống

Kích Hoạt Cửa Sổ Modal HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});

4. Lợi Ích Và Nhược Điểm – Bạn Có Nên Thực Sự Sử Dụng Nó Không?

“javascript:void(0)” được sử dụng rộng rãi, nhưng nó có một số nhược điểm. Phần này giải thích cả lợi ích và cảnh báo.

4-1. Lợi ích

  1. Ngăn chặn việc điều hướng mặc định
  2. Cú pháp đơn giản và trực quan
  3. Hữu ích cho các liên kết placeholder

4-2. Nhược điểm

  1. Ảnh hưởng đến SEO Các công cụ tìm kiếm không thể thu thập nội dung href.
  2. Vấn đề truy cập Trình đọc điều hướng bằng bàn phím có thể không hoạt động đúng.

4-3. Khi Nào Nên Dùng và Khi Nào Nên Tránh

Các trường hợp sử dụng được đề xuất:

  • Hành xử giống nút nhưng được triển khai dưới dạng liên kết
  • Các liên kết tạm thời không hoạt động

Tránh khi:

  • Bạn cần các liên kết thân thiện với SEO
  • Truy cập (accessibility) là quan trọng

5. Các Phương Pháp Thay Thế và Thực Hành Hiện Đại

Mặc dù “javascript:void(0)” tiện lợi, nhưng đã có những cách tiếp cận hiện đại và an toàn hơn.

5-1. Sử dụng event.preventDefault()

Khái niệm
Phương pháp này hủy hành vi mặc định như điều hướng liên kết hoặc gửi form.
Ví dụ
HTML:

<a href="#" id="customLink">Link</a>

JavaScript:

document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. Sử dụng Thẻ <button>

HTML5 khuyến nghị sử dụng phần tử <button> khi muốn thực hiện hành vi giống nút.
HTML:

<button id="actionButton">Click</button>

JavaScript:

document.getElementById('actionButton').addEventListener('click', function() {
  alert('Button clicked!');
});

5-3. Ví Dụ Thân Thiện Với Truy Cập & SEO

HTML:

<a href="#" id="accessibleLink" tabindex="0">Click</a>

JavaScript:

document.getElementById('accessibleLink').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Executed with Enter key!');
  }
});

6. Mã Ví Dụ Theo Trường Hợp Sử Dụng

6-1. Tạo Menu Điều Hướng

HTML:

<a href="javascript:void(0);" id="menuToggle">Menu</a>
<ul id="menu" style="display: none;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript:

document.getElementById('menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
});

6-2. Kích Hoạt Cửa Sổ Modal

HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  modal.style.display = 'none';
});

7. Tổng Kết – Sử Dụng “javascript:void(0)” và Các Lựa Chọn Tương Lai

7-1. Những Điểm Chính Cần Nhớ

  1. Khái niệm cơ bản : Vô hiệu hoá hành vi mặc định của liên kết và chạy logic tùy chỉnh.
  2. Cảnh báo và các lựa chọn thay thế : Sử dụng event.preventDefault() hoặc <button> để cải thiện SEO và khả năng truy cập.
  3. Ví dụ thực tế : Menu điều hướng, kích hoạt modal, và nhiều hơn nữa.

7-2. Đề Xuất Cho Phát Triển Hiện Đại

Trong khi “javascript:void(0)” vẫn còn được dùng, phát triển hiện đại ưu tiên SEO và tính khả dụng.
Cách tiếp cận được đề xuất:

  • Dùng “javascript:void(0)” cho các prototype nhanh hoặc dự án rất nhỏ.
  • Dùng event.preventDefault() hoặc <button> trong môi trường sản xuất.

7-3. Suy Nghĩ Cuối Cùng

Áp dụng các kỹ thuật được giới thiệu ở đây, bạn có thể viết mã cân nhắc cả SEO và trải nghiệm người dùng.

広告