Sự khác biệt giữa href="", href="#" và href="javascript:void(0)" là gì?
Các cách sử dụng khác nhau đối với chúng là gì và khi nào thì tốt hơn so với cách khác?Sự khác biệt giữa href = "", href = "#" và href = "javascript: void (0)" là gì?
'#' sẽ đưa người dùng trở lại đầu trang, vì vậy tôi thường đi với void(0).
Ba lý do. Khuyến khích việc sử dụng # amoungst một nhóm các nhà phát triển không tránh khỏi dẫn đến một số cách sử dụng các giá trị trả về của hàm gọi là như thế này:
function doSomething() {
//some code
return false;
}
Nhưng sau đó họ quên sử dụng return doSomething() trong onclick và chỉ sử dụng doSomething().
Lý do thứ hai để tránh # là kết quả trả về cuối cùng là sai; sẽ không thực thi nếu hàm được gọi ném một lỗi. Do đó các nhà phát triển cũng phải nhớ xử lý bất kỳ lỗi nào một cách thích hợp trong hàm được gọi.
Lý do thứ ba là có trường hợp thuộc tính sự kiện onclick được gán động. Tôi thích để có thể gọi một chức năng hoặc gán nó một cách năng động mà không cần phải mã hóa các chức năng đặc biệt cho một phương pháp đính kèm hay cách khác. Do đó onclick của tôi (hoặc vào bất cứ điều gì) trong HTML markup trông như thế này:
onclick="someFunc.call(this)"
HOẶC
onclick="someFunc.apply(this, arguments)"
Sử dụng javascript:void(0) tránh tất cả những cơn đau đầu trên và tôi đã không tìm thấy bất kỳ ví dụ về một nhược điểm.
Vì vậy, nếu bạn là một nhà phát triển duy nhất sau đó bạn có thể làm rõ ràng sự lựa chọn riêng của bạn, nhưng nếu bạn làm việc như một nhóm bạn phải một trong hai trạng thái:
use href="#", hãy chắc chắn onclick luôn chứa return false; ở cuối, mà bất kỳ hàm được gọi nào không ném một lỗi và nếu bạn đính kèm một hàm động vào thuộc tính onclick hãy chắc chắn rằng cũng như không ném một lỗi, nó trả về false.
HOẶC
use href="javascript:void(0)"
Thứ hai rõ ràng là dễ dàng hơn để truyền đạt.
href = "" sẽ liên kết đến cùng một trang với trang bạn hiện đang truy cập, làm mới trang một cách hiệu quả. href = "#" sẽ không làm mới trang, nhưng bằng cách sử dụng # sẽ làm cho màn hình di chuyển lên đầu trang (đó là trình duyệt có hiệu quả tìm kiếm một neo không có tên,). javascript: void (0) sẽ ngăn chặn bất cứ điều gì xảy ra trên liên kết ở tất cả.
Tôi sử dụng # khi tôi muốn đặt liên kết và tôi không chắc chắn vị trí của chúng, ví dụ: khi tạo bố cục trang. Tôi thường sử dụng một hành động form = "" nếu tôi muốn đăng biểu mẫu lên cùng một trang, nhưng tôi chưa bao giờ sử dụng cá nhân href = "" hoặc javascript: void (0).
href="" sẽ tải lại trang hiện
href="#" sẽ di chuyển các trang hiện tại để đầu
'href = "javascript: void (0)" sẽ không làm gì cả.
Bạn có thể nhận được hiệu ứng tương tự của javascript: void(0) bằng cách trả về false từ trình xử lý sự kiện nhấp chuột của liên kết với một trong hai phương pháp khác.
Tôi thích sử dụng <a id="the-link" href="#">Link</a> và sau đó gắn một event handler cho người nghe nhấp chuột đâu đó trong javascript của tôi như:
document.getElementById('the-link').onclick = function(){
// Do stuff
return false;
};
Bằng cách này, kể từ khi bạn đang sử dụng #, ngay cả khi người dùng đã vô hiệu hóa javascript trang sẽ không tải lại (nó sẽ chỉ cuộn lên trên cùng), và tôi nghĩ rằng nó sạch hơn rất nhiều so với javascript: void(0)
Nếu bạn sử dụng href="", một số trình duyệt có thể nghĩ rằng thẻ neo không phải là một liên kết. . Sau đó, nó sẽ không nhận được hành vi và sự kiện của một liên kết. Ngay cả khi nó hoạt động trong các trình duyệt mà bạn có thể kiểm tra, nó an toàn hơn không sử dụng một giá trị rỗng.
Thường thì dấu trang không có tên href="#" được sử dụng. Nó giống như liên kết tới bất kỳ dấu trang nào, chẳng hạn như href="#contact", ngoại trừ dấu trang không có tên dẫn đến đầu trang. Điều này hoạt động như một dự phòng phong nha nếu Javascript không hoạt động, vì nó chỉ đưa bạn lên đầu thay vì điều hướng đến một nơi khác. Đôi khi bạn thấy rằng nhà phát triển đã quên ngừng hành động mặc định của liên kết và trang nhảy lên đầu trong khi tập lệnh thực hiện tác vụ của nó.
Sử dụng href="javascript:void(0)" là cách để tạo URL không dẫn đến đâu cả, do đó liên kết sẽ không được theo dõi. Nó hoạt động tốt, nhưng khi URL được hiển thị trong trường trạng thái khi bạn trỏ vào liên kết trong hầu hết các trình duyệt, nó trông không đẹp.
Chúng là hai liên kết khác nhau:
1. href = "" sẽ chuyển hướng người dùng đến trang gốc. Giống như trang mặc định hoặc trang chỉ mục.
2. href = "#" Sẽ không chuyển hướng người dùng nhưng cũng sẽ không làm bất cứ điều gì ngoài việc thay đổi URL. Nó chỉ để tạo một URL giống như nút tôi có nghĩa là một nút neo giống như. Nhưng không có nơi để đi với nó. 3. Nếu bạn muốn làm một số công việc javascript với nó. Bạn có thể sử dụng
<button onclick="dothis()">Click me!</button>
function dothis() {
// do what ever you want to do here
}
Loại thứ ba sẽ không thay đổi url, sẽ không chuyển hướng!