Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

javascript:void(0) là gì?

Chúng ta bắt gặp lệnh này rất nhiều lần ở href của thẻ <a> mà không biết công dụng của nó là gì 😯.

  <a href="javascript:void(0)" id="login">login homiedev.com</a>

Để giải thích javascript:void(0) là gì thì hôm nay, chúng ta sẽ đi tìm hiểu từng phần trong câu lệnh trên để biết ý nghĩa của javascript:void(0) nhé.

void JavaScript là gì?

Từ khóa void trong JavaScript là một operator yêu cầu JavaScript KHÔNG return về kết quả của một biểu thức.

Cùng xem một ví dụ:

let total = 5 + 5;
console.log(total); // 10

Khi chúng ta sử dụng void keyword, biểu thức sẽ return undefined thay vì kết quả là 10.

let total = void (5 + 5);
console.log(total); // undefined

Mặc dù total return undefined, biểu thức 5 + 5 ở trên vẫn được thực thi bởi JavaScript:

let total = void console.log(5 + 5); // 10
console.log(total); // undefined

Chúng ta có thể thấy, biểu thức theo sau void sẽ vẫn được thực thi như bình thường, nhưng nó sẽ luôn return undefined.

javascript:void(0) là gì?

Như ở giới thiệu đầu bài viết chúng ta thường bắt gặp javascript:void(0) viết dưới dạng giá trị của thuộc tính href cho một số thẻ <a>.

 <a href="javascript:void(0)" id="show-more">
  show more
 </a>

Phần javascript: Đây là một URI scheme yêu cầu trình duyệt coi văn bản sau : là mã JavaScript.

Có các URI khác cho thuộc tính href như tel,mailto,...

  mailto:homiedev@example.com
  └─┬──┘ └────┬─────────────┘
  scheme     path

  tel:+1-816-555-1212

Như ở trên, mình đã giải thích toán tử void JavaScript cho các bạn thì các bạn có thể hiểu được ý nghĩa số 0 bên trong void.

void (* anything *) return undefined. Nó sẽ ngăn chặn hành vi mặc định của thẻ đó, tương tự như khi sử dụng preventDefault trong event onClick.

Chính vì lí do đó nó sẽ làm cho thẻ <a> sẽ không chuyển đến địa chỉ web khác.

Có thể nói javascript:void(0) là cách đơn giản nhất để ngăn chặn hành vi mặc định của thẻ.

Kết luận

Để ngăn chặn hành vi mặc định của thẻ <a>, chúng ta nên sử dụng <button> cho các nút và <a> cho các liên kết.

Khi bạn cần thay đổi con trỏ chuột, bạn nên sử dụng CSS thay vì sử dụng thẻ <a>.

Chúc các bạn học tốt ^^.

Đọc thêm những bài viết hay khác:

  1. 👨‍🏫 Cùng học JavaScript ✍
  2. flat() javascript là gì? method khá hay bạn nên biết
  3. Computed property names trong JavaScript là gì? Tạo dynamic key trong JavaScript
Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.