Những biểu hiện của <a href= Hayjavascript:; Mạnh> </a> làm gì?

Thỉnh thoảng tôi đã thấy href href được sử dụng trong các trang web. Tuy nhiên, tôi không hiểu điều này đang cố gắng làm gì hoặc kỹ thuật. Ai đó có thể giải thích?

<a href="javascript:;"></a>

Một <a>phần tử là HTML không hợp lệ trừ khi nó có thuộc tính hrefhoặc namethuộc tính.

Nếu bạn muốn nó hiển thị chính xác như một liên kết (nghĩa là gạch chân, con trỏ tay, v.v.), thì nó sẽ chỉ làm như vậy nếu nó có hrefthuộc tính.

Do đó, mã như thế này đôi khi được sử dụng như một cách tạo liên kết, nhưng không phải cung cấp URL thực tế trong hrefthuộc tính. Nhà phát triển rõ ràng muốn bản thân liên kết không làm gì cả, và đây là cách dễ nhất mà anh ta biết.

Anh ta có thể có một số mã sự kiện javascript ở nơi khác được kích hoạt khi nhấp vào liên kết và đó sẽ là những gì anh ta muốn thực sự xảy ra, nhưng anh ta muốn nó trông giống như một <a>liên kết thẻ bình thường .

Một số nhà phát triển sử dụng href='#'cho cùng một mục đích, nhưng điều này khiến trình duyệt nhảy lên đầu trang, điều này có thể không mong muốn. Và anh ta không thể để trống href, bởi vì đó href=''là một liên kết quay lại trang hiện tại (nghĩa là nó gây ra sự làm mới trang).

Có nhiều cách xung quanh những điều này. Sử dụng một đoạn mã Javascript trống trong hrefmột trong số đó và mặc dù đó không phải là giải pháp tốt nhất, nhưng nó vẫn hoạt động.

về cơ bản thay vì sử dụng liên kết để di chuyển các trang (hoặc neo), sử dụng phương thức này sẽ khởi chạy (các) chức năng javascript

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

nhấp vào liên kết sẽ kích hoạt cảnh báo.

Có một số cơ chế để tránh một liên kết để đạt đến đích của nó. Một trong những câu hỏi không trực quan nhiều.

Tùy chọn sạch hơn là sử dụng href="#no"vị trí #noneo không xác định trong tài liệu.

Bạn có thể sử dụng một tên ngữ nghĩa hơn như #disable hoặc #action để tăng khả năng đọc.

Lợi ích của phương pháp:

• Tránh hiệu ứng "di chuyển lên trên cùng" của khoảng trống href = "#"
• Tránh sử dụng javascript

Hạn chế:

• Bạn phải chắc chắn tên neo không được sử dụng trong tài liệu.

Vì <a>phần tử không hoạt động như một liên kết, nên tùy chọn tốt nhất trong các trường hợp này không phải là sử dụng một <a>phần tử mà là <div>và cung cấp kiểu giống như liên kết mong muốn.

<a href="javascript:alert('Hello');"></a>

chỉ là viết tắt cho:

<a href="" onclick="alert('Hello'); return false;"></a>

Đó là một cách để làm cho một liên kết hoàn toàn không làm gì khi được nhấp (trừ khi các sự kiện Javascript bị ràng buộc với nó).

Đó là cách chạy Javascript thay vì theo liên kết:

<a href="Javascript: doStuff();">link</a>

Khi thực sự không có javascript để chạy (như ví dụ của bạn) thì nó không làm gì cả.

Tham khảo điều này:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>

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

javascript: nói với trình duyệt sẽ viết mã javascript

Chủ đề cũ nhưng tôi nghĩ rằng tôi chỉ thêm rằng lý do các nhà phát triển sử dụng cấu trúc này không phải là để tạo liên kết chết, mà vì các URL javascript vì một số lý do không chuyển các tham chiếu đến phần tử html đang hoạt động một cách chính xác.

ví dụ: handler_function(this.id)hoạt động như onClicknhưng không phải là một URL javascript.

Do đó, lựa chọn giữa việc viết mã tuân thủ tiêu chuẩn sư phạm liên quan đến việc bạn phải điều chỉnh thủ công cuộc gọi cho từng siêu liên kết hoặc mã không chuẩn có thể được viết một lần và được sử dụng ở mọi nơi.

Vì vậy, nó được sử dụng để viết mã js bên trong hrefthay vì người nghe sự kiện thích onclickvà tránh #các liên kết hrefđể làm cho athẻ hợp lệ cho html.

Tôi đã có một nghiên cứu về cách sử dụng javascript:bên trong hrefthuộc tính.

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

Thông qua mã này, bạn thậm chí có thể viết mã js ở đó thay vì chỉ gọi các chức năng.

Đã thử nghiệm trong phiên bản chrome 68.0.3440.106 (Bản dựng chính thức) (64-bit)

Đã thử nghiệm trong Firefox Quantom 61.0.1 (64-bit)

Cách tốt nhất để luôn hiển thị một liên kết chính xác là với css như sau:

a {cursor: pointer !important}

Người ta nên tránh làm theo những điều không cần thiết như được đề cập trong chủ đề.