it-swarm-vi.com

Tôi nên sử dụng giá trị "href" nào cho các liên kết JavaScript, "#" hoặc "javascript: void (0)"?

Sau đây là hai phương pháp xây dựng liên kết có mục đích duy nhất là chạy mã JavaScript. Cái nào tốt hơn, về chức năng, tốc độ tải trang, mục đích xác nhận, v.v.?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

hoặc là

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
3863
2cBGj7vsfp

Tôi sử dụng javascript:void(0).

Ba lý do. Việc khuyến khích sử dụng # trong số một nhóm các nhà phát triển chắc chắn sẽ dẫn đến một số sử dụng giá trị trả về của hàm được gọi như sau:

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à vì return false; cuối cùng sẽ không thực thi nếu hàm được gọi gây ra 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.

Một lý do thứ ba là có những 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 hàm hoặc gán nó một cách linh hoạt mà không phải mã hóa hàm cụ thể cho một phương thức đính kèm hoặc một phương pháp khác. Do đó, onclick (hoặc trên bất cứ thứ gì) trong đánh dấu HTML trông như thế này:

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"

Sử dụng javascript:void(0) để tránh tất cả các vấn đề đau đầu ở trên và tôi không tìm thấy bất kỳ ví dụ nào về nhược điểm.

Vì vậy, nếu bạn là một nhà phát triển đơn độc thì rõ ràng bạn có thể đưa ra lựa chọn của riêng mình, nhưng nếu bạn làm việc theo nhóm, bạn phải nêu rõ:

Sử dụng href="#", đảm bảo onclick luôn chứa return false; ở cuối, rằng bất kỳ hàm được gọi nào sẽ không gây ra lỗi và nếu bạn tự động gắn một hàm vào thuộc tính onclick chắc chắn rằng cũng như không ném lỗi, nó sẽ trả về false.

OR

Sử dụng href="javascript:void(0)"

Thứ hai rõ ràng là dễ dàng hơn nhiều để giao tiếp.

2115
AnthonyWJones

Cũng không.

Nếu bạn có thể có một URL thực tế có ý nghĩa, hãy sử dụng đó làm HREF. Onclick sẽ không kích hoạt nếu ai đó nhấp vào liên kết của bạn để mở tab mới hoặc nếu họ đã tắt JavaScript.

Nếu điều đó là không thể, thì ít nhất bạn nên tiêm thẻ neo vào tài liệu bằng JavaScript và các trình xử lý sự kiện nhấp thích hợp.

Tôi nhận ra điều này không phải lúc nào cũng có thể, nhưng theo tôi, nó nên được sử dụng để phát triển bất kỳ trang web công cộng nào.

Hãy xemJavaScript không phô trươngTăng cường tiến bộ(cả Wikipedia).

1251
Aaron Wagner

Thực hiện <a href="#" onclick="myJsFunc();">Link</a> hoặc <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> hoặc bất cứ điều gì khác có chứa thuộc tính onclick - đã ổn trở lại năm năm trước, mặc dù bây giờ nó có thể là một thực tiễn tồi. Đây là lý do tại sao:

  1. Nó thúc đẩy việc thực hành JavaScript gây khó chịu - hóa ra rất khó để duy trì và khó mở rộng quy mô. Thông tin thêm về điều này trongJavaScript không phô trương.

  2. Bạn đang dành thời gian của mình để viết mã dài dòng quá mức - có rất ít (nếu có) lợi ích cho cơ sở mã của bạn.

  3. Hiện nay có những cách tốt hơn, dễ dàng hơn và có thể duy trì và mở rộng hơn để hoàn thành kết quả mong muốn.

Cách JavaScript không phô trương

Chỉ cần không có thuộc tính href nào cả! Bất kỳ thiết lập lại CSS tốt nào cũng sẽ xử lý kiểu con trỏ mặc định bị thiếu, vì vậy đó không phải là vấn đề. Sau đó, đính kèm chức năng JavaScript của bạn bằng cách sử dụng các thực tiễn tốt nhất duyên dáng và không phô trương - có thể duy trì nhiều hơn khi logic JavaScript của bạn vẫn ở trong JavaScript, thay vì trong đánh dấu của bạn - điều cần thiết khi bạn bắt đầu phát triển các ứng dụng JavaScript quy mô lớn đòi hỏi phải phân tách logic của bạn thành các thành phần và mẫu hộp đen. Thông tin thêm về điều này trongKiến trúc ứng dụng JavaScript quy mô lớn

Ví dụ mã đơn giản

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Một hộp đenBackbone.jsexample

Để biết ví dụ về thành phần Backbone.js có thể mở rộng, hộp đen, có thể mở rộng -hãy xem ví dụ jsfiddle hoạt động này tại đây. Lưu ý cách chúng tôi sử dụng các thực tiễn JavaScript không phô trương và trong một số lượng nhỏ mã có một thành phần có thể được lặp lại trên trang nhiều lần mà không có tác dụng phụ hoặc xung đột giữa các trường hợp thành phần khác nhau. Kinh ngạc!

Ghi chú

  • Việc bỏ qua thuộc tính href trên phần tử a sẽ khiến phần tử không thể truy cập được bằng cách sử dụng phím điều hướng tab. Nếu bạn muốn các phần tử đó có thể truy cập được thông qua khóa tab, bạn có thể đặt thuộc tính tabindex hoặc sử dụng các phần tử button thay thế. Bạn có thể dễ dàng định kiểu các thành phần nút để trông giống như các liên kết thông thường như được đề cập trongCâu trả lời của Tracker1.

  • Việc bỏ qua thuộc tính href trên phần tử a sẽ gây ra Internet Explorer 6Internet Explorer 7 để không sử dụng kiểu a:hover, đó là lý do tại sao chúng tôi đã thêm một đoạn mã JavaScript đơn giản để thực hiện điều này thông qua a.hover. Điều này hoàn toàn ổn, vì nếu bạn không có thuộc tính href và không có sự xuống cấp duyên dáng thì liên kết của bạn sẽ không hoạt động - và bạn sẽ có vấn đề lớn hơn để lo lắng.

  • Nếu bạn muốn hành động của mình vẫn hoạt động với JavaScript bị vô hiệu hóa, thì sử dụng phần tử a với thuộc tính href đi đến một số URL sẽ thực hiện hành động theo cách thủ công thay vì thông qua yêu cầu Ajax hoặc bất cứ điều gì nên làm. Nếu bạn đang làm điều này, thì bạn muốn đảm bảo rằng bạn thực hiện một event.preventDefault() cho cuộc gọi nhấp của bạn để đảm bảo khi nhấp vào nút, nó không theo liên kết. Tùy chọn này được gọi là suy thoái duyên dáng.

758
balupton

'#' sẽ đưa người dùng trở lại đầu trang, vì vậy tôi thường đi với void(0).

javascript:; cũng hoạt động như javascript:void(0);

302
Adam Tuttle

Tôi thành thật sẽ đề nghị không. Tôi sẽ sử dụng <button></button> cách điệu cho hành vi đó.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Bằng cách này bạn có thể gán onclick của bạn. Tôi cũng đề nghị ràng buộc thông qua tập lệnh, không sử dụng thuộc tính onclick trên thẻ phần tử. Gotcha duy nhất là hiệu ứng văn bản 3d psuedo trong các IE cũ không thể bị vô hiệu hóa.


Nếu bạnPHẢIsử dụng phần tử A, hãy sử dụng javascript:void(0); vì những lý do đã được đề cập.

  • Sẽ luôn luôn chặn trong trường hợp sự kiện onclick của bạn không thành công.
  • Sẽ không có các cuộc gọi tải sai lầm xảy ra hoặc kích hoạt các sự kiện khác dựa trên thay đổi băm
  • Thẻ băm có thể gây ra hành vi không mong muốn nếu nhấp chuột rơi (ném onclick), tránh nó trừ khi đó là hành vi rơi thích hợp và bạn muốn thay đổi lịch sử điều hướng.

LƯU Ý: Bạn có thể thay thế 0 bằng một chuỗi như javascript:void('Delete record 123') có thể đóng vai trò là một chỉ báo bổ sung sẽ hiển thị những gì nhấp chuột sẽ thực sự làm.

244
Tracker1

Cái đầu tiên, lý tưởng là có một liên kết thực để theo dõi trong trường hợp người dùng bị tắt JavaScript. Chỉ cần đảm bảo trả về false để ngăn sự kiện nhấp chuột kích hoạt nếu JavaScript thực thi.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Nếu bạn sử dụng Angular2, cách này hoạt động:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Xem tại đây https://stackoverflow.com/a/45465728/2803344

136
Zach

Không, nếu bạn hỏi tôi;

Nếu "liên kết" của bạn có mục đích duy nhất là chạy một số mã JavaScript thì nó không đủ điều kiện làm liên kết; thay vì một đoạn văn bản có chức năng JavaScript được ghép nối với nó. Tôi khuyên bạn nên sử dụng thẻ <span> có gắn onclick handler và một số CSS cơ bản để bắt chước một liên kết. Liên kết được tạo để điều hướng và nếu mã JavaScript của bạn không dành cho điều hướng thì đó không phải là thẻ <a>.

Thí dụ:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>
95
fijter

Lý tưởng nhất là bạn làm điều này:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Hoặc, thậm chí tốt hơn, bạn có liên kết hành động mặc định trong HTML và bạn sẽ thêm sự kiện onclick vào phần tử một cách không phô trương thông qua JavaScript sau khi kết xuất DOM, do đó đảm bảo rằng nếu JavaScript không xuất hiện/sử dụng thì bạn không có các trình xử lý sự kiện vô dụng đánh đố mã của bạn và có khả năng làm xáo trộn (hoặc ít nhất là làm sao lãng) nội dung thực tế của bạn.

95
Steve Paulo

Chỉ sử dụng # sẽ tạo ra một số chuyển động vui nhộn, vì vậy tôi khuyên bạn nên sử dụng #self nếu bạn muốn tiết kiệm cho những nỗ lực gõ của JavaScript bla, bla,.

75
Spammer Joe

Tôi sử dụng như sau

<a href="javascript:;" onclick="myJsFunc();">Link</a>

thay thế

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
63
se_pavel

Tôi đồng ý với các đề xuất ở nơi khác nói rằng bạn nên sử dụng URL thông thường trong thuộc tính href, sau đó gọi một số hàm JavaScript trong onclick. Lỗ hổng là, họ tự động thêm return false sau cuộc gọi.

Vấn đề với cách tiếp cận này là, nếu chức năng sẽ không hoạt động hoặc nếu có bất kỳ vấn đề nào, liên kết sẽ trở nên không thể xem được. Sự kiện Onclick sẽ luôn trả về false, vì vậy URL thông thường sẽ không được gọi.

Có giải pháp rất đơn giản. Hãy để hàm trả về true nếu nó hoạt động chính xác. Sau đó sử dụng giá trị được trả về để xác định xem có nên hủy bỏ nhấp hay không:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Lưu ý rằng tôi phủ nhận kết quả của hàm doSomething(). Nếu nó hoạt động, nó sẽ trả về true, vì vậy nó sẽ bị từ chối (false) và path/to/some/URL sẽ không được gọi. Nếu chức năng sẽ trả về false (ví dụ: trình duyệt không hỗ trợ một cái gì đó được sử dụng trong chức năng hoặc bất cứ điều gì khác xảy ra), nó bị từ chối thành truepath/to/some/URL được gọi.

53
Fczbkk

# tốt hơn javascript:anything, nhưng sau đây thậm chí còn tốt hơn:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Bạn phải luôn cố gắng cho sự xuống cấp duyên dáng (trong trường hợp người dùng không bật JavaScript ... và khi đó là với thông số kỹ thuật và ngân sách). Ngoài ra, nó được coi là hình thức xấu để sử dụng các thuộc tính và giao thức JavaScript trực tiếp trong HTML.

50
Justin Johnson

Trừ khi bạn viết ra liên kết bằng JavaScript (để bạn biết nó được bật trong trình duyệt), tốt nhất bạn nên cung cấp một liên kết phù hợp cho những người đang duyệt JavaScript bị vô hiệu hóa và sau đó ngăn hành động mặc định của liên kết trong onclick của bạn xử lý sự kiện. Bằng cách này, những người đã bật JavaScript sẽ chạy chức năng và những người bị tắt JavaScript sẽ chuyển đến một trang thích hợp (hoặc vị trí trong cùng một trang) thay vì chỉ nhấp vào liên kết và không có gì xảy ra.

38
Simon Forrest

Tôi khuyên bạn nên sử dụng phần tử <button> thay vào đó, đặc biệt nếu điều khiển được cho là tạo ra thay đổi trong dữ liệu. (Một cái gì đó giống như một bài đăng.)

Thậm chí còn tốt hơn nếu bạn tiêm các yếu tố một cách không phô trương, một loại tăng cường tiến bộ. (Xem nhận xét này .)

37
phyzome

Chắc chắn băm (#) là tốt hơn bởi vì trong JavaScript nó là một giả ngẫu nhiên:

  1. lịch sử gây ô nhiễm
  2. khởi tạo bản sao mới của động cơ
  3. chạy trong phạm vi toàn cầu và không tôn trọng hệ thống sự kiện.

Tất nhiên "#" với trình xử lý onclick để ngăn hành động mặc định là tốt hơn nhiều. Hơn nữa, một liên kết có mục đích duy nhất để chạy JavaScript không thực sự là "liên kết" trừ khi bạn đang gửi người dùng đến một số neo hợp lý trên trang (chỉ # sẽ gửi lên đầu) khi có sự cố. Bạn chỉ có thể mô phỏng giao diện liên kết với biểu định kiểu và quên đi href.

Ngoài ra, liên quan đến đề xuất của cowgod, đặc biệt là: ...href="javascript_required.html" onclick="... Đây là cách tiếp cận tốt, nhưng nó không phân biệt giữa các kịch bản "JavaScript bị vô hiệu hóa" và "không thành công".

35
Free Consulting

Tôi thường đi

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Nó ngắn hơn javascript: void (0) và thực hiện tương tự.

30
dnetix

Tôi sẽ dùng:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Lý do:

  1. Điều này làm cho href đơn giản, các công cụ tìm kiếm cần nó. Nếu bạn sử dụng bất cứ thứ gì khác (chẳng hạn như chuỗi), nó có thể gây ra lỗi 404 not found.
  2. Khi chuột di chuyển qua liên kết, nó không hiển thị rằng đó là tập lệnh.
  3. Bằng cách sử dụng return false;, trang không nhảy lên trên cùng hoặc phá vỡ nút back.
27
Eric Yin

Tôi chọn sử dụng javascript:void(0), vì sử dụng điều này có thể ngăn nhấp chuột phải để mở menu nội dung. Nhưng javascript:; ngắn hơn và làm điều tương tự.

25
user564706

Vì vậy, khi bạn đang thực hiện một số điều JavaScript với thẻ <a /> và nếu bạn cũng đặt href="#", bạn có thể thêm trả về false vào cuối sự kiện (trong trường hợp liên kết sự kiện nội tuyến) như:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Hoặc bạn có thể thay đổi thuộc tính href bằng JavaScript như:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

hoặc là

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Nhưng về mặt ngữ nghĩa, tất cả các cách trên để đạt được điều này đều sai (mặc dù nó hoạt động tốt) . Nếu bất kỳ yếu tố nào không được tạo để điều hướng trang và có một số thứ JavaScript được liên kết với nó, thì đó không phải là thẻ <a>.

Thay vào đó, bạn có thể sử dụng <button /> để thực hiện mọi việc hoặc bất kỳ yếu tố nào khác như b, span hoặc bất cứ điều gì phù hợp theo nhu cầu của bạn, bởi vì bạn được phép thêm các sự kiện trên tất cả các yếu tố.


Vì vậy, có một lợi ích để sử dụng <a href="#">. Bạn nhận được con trỏ theo mặc định trên phần tử đó khi bạn làm a href="#". Vì thế, tôi nghĩ bạn có thể sử dụng CSS cho việc này như cursor:pointer; để giải quyết vấn đề này.

Và cuối cùng, nếu bạn đang ràng buộc sự kiện từ chính mã JavaScript, bạn có thể thực hiện event.preventDefault() để đạt được điều này nếu bạn đang sử dụng thẻ <a>, nhưng nếu bạn không sử dụng thẻ <a> cho điều này, bạn sẽ có lợi thế, bạn không cần phải làm điều này.

Vì vậy, nếu bạn thấy, tốt hơn hết là không sử dụng thẻ cho loại công cụ này.

23
Ashish Kumar

Nó sẽ tốt hơn để sử dụng jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

và bỏ qua cả href="#"href="javascript:void(0)".

Đánh dấu thẻ neo sẽ giống như

<a onclick="hello()">Hello</a>

Đủ đơn giản!

22
naveen

Không sử dụng các liên kết cho mục đích duy nhất là chạy JavaScript.

Việc sử dụng href = "#" cuộn trang lên trên cùng; việc sử dụng void (0) tạo ra các vấn đề điều hướng trong trình duyệt.

Thay vào đó, hãy sử dụng một yếu tố khác ngoài liên kết:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

Và tạo kiểu cho nó bằng CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
22
Garrett

Nếu bạn tình cờ sử dụng AngularJS , bạn có thể sử dụng như sau:

<a href="">Do some fancy JavaScript</a>

Mà sẽ không làm gì cả.

Ngoài ra

  • Nó sẽ không đưa bạn đến đầu trang, như với (#) [.__.]
    • Do đó, bạn không cần phải trả lại false một cách rõ ràng bằng JavaScript
  • Nó ngắn gọn súc tích
20
whirlwin

Thông thường, bạn phải luôn có một liên kết quay lại để đảm bảo rằng các máy khách bị tắt JavaScript vẫn có một số chức năng. Khái niệm này được gọi là JavaScript không phô trương.

Ví dụ ... Giả sử bạn có liên kết tìm kiếm sau:

<a href="search.php" id="searchLink">Search</a>

Bạn luôn có thể làm như sau:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Theo cách đó, những người bị JavaScript bị vô hiệu hóa được chuyển đến search.php trong khi những người xem có JavaScript xem chức năng nâng cao của bạn.

19
Andrew Moore

Nếu không có href thì có lẽ không có lý do gì để sử dụng thẻ neo.

Bạn có thể đính kèm các sự kiện (nhấp chuột, di chuột, v.v.) trên hầu hết mọi yếu tố, vậy tại sao không sử dụng spanor a div?

Và đối với người dùng bị vô hiệu hóa JavaScript: nếu không có dự phòng (ví dụ: href), thì ít nhất họ không thể nhìn thấy và tương tác với phần tử đó, bất kể đó là thẻ <a> hay <span>.

18
achairapart

Tôi tin rằng bạn đang trình bày một sự phân đôi giả. Đây không phải là hai lựa chọn duy nhất.

Tôi đồng ý với ông D4V360, người đã đề xuất rằng, mặc dù bạn đang sử dụng thẻ neo, nhưng bạn không thực sự có một neo ở đây. Tất cả những gì bạn có là một phần đặc biệt của một tài liệu nên có hành vi hơi khác nhau. Thẻ <span> thích hợp hơn nhiều.

16
Clever Human

Tôi đã thử cả google chrome với các công cụ dành cho nhà phát triển và id="#" mất 0,32 giây. Trong khi phương thức javascript:void(0) chỉ mất 0,18 giây. Vì vậy, trong google chrome, javascript:void(0) hoạt động tốt hơn và nhanh hơn.

16
user6460587

Tùy thuộc vào những gì bạn muốn thực hiện, bạn có thể quên onclick và chỉ cần sử dụng href:

<a href="javascript:myJsFunc()">Link Text</a>

Nó nhận được xung quanh sự cần thiết phải trả lại sai. Tôi không thích tùy chọn # vì như đã đề cập, nó sẽ đưa người dùng lên đầu trang. Nếu bạn có nơi nào khác để gửi người dùng nếu họ không bật JavaScript (điều này hiếm khi tôi làm việc, nhưng một ý tưởng rất hay), thì phương pháp đề xuất của Steve hoạt động rất tốt.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Cuối cùng, bạn có thể sử dụng javascript:void(0) nếu bạn không muốn ai đi bất cứ đâu và nếu bạn không muốn gọi một hàm JavaScript. Nó hoạt động rất tốt nếu bạn có một hình ảnh mà bạn muốn một sự kiện di chuột xảy ra, nhưng không có gì để người dùng nhấp vào.

16
Will Read

Khi tôi có một số liên kết giả, tôi thích cung cấp cho họ một lớp 'không liên kết'.

Sau đó, trong jQuery, tôi thêm đoạn mã sau:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

Và đối với HTML, liên kết chỉ đơn giản là

<a href="/" class="no-link">Faux-Link</a>

Tôi không thích sử dụng Thẻ Hash trừ khi chúng được sử dụng cho neo và tôi chỉ làm như trên khi tôi có nhiều hơn hai liên kết giả, nếu không thì tôi sử dụng javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Thông thường, tôi chỉ muốn tránh sử dụng một liên kết và chỉ quấn một thứ gì đó trong một khoảng và sử dụng nó như một cách để kích hoạt một số mã JavaScript, như cửa sổ bật lên hoặc hiển thị nội dung.

16

Cá nhân tôi sử dụng chúng kết hợp. Ví dụ:

HTML

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

với một chút jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

hoặc là

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Nhưng tôi đang sử dụng nó chỉ để ngăn trang nhảy lên đầu khi người dùng nhấp vào một neo trống. Tôi hiếm khi sử dụng onClick và các sự kiện on khác trực tiếp trong HTML.

Đề xuất của tôi sẽ là sử dụng phần tử <span> với thuộc tính class thay vì neo. Ví dụ:

<span class="link">Link</span>

Sau đó gán hàm cho .link với tập lệnh được bọc trong phần thân và ngay trước thẻ </body> hoặc trong tài liệu JavaScript bên ngoài.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Lưu ý: Đối với các phần tử được tạo động, hãy sử dụng:

$('.link').on('click', function() {
    // do something
});

Và đối với các phần tử được tạo động được tạo bằng các phần tử được tạo động, hãy sử dụng:

$(document).on('click','.link', function() {
    // do something
});

Sau đó, bạn có thể định kiểu phần tử span để trông giống như một neo với một chút CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Đây làmột jsFiddleví dụ ở trên đã nói ở trên.

13
mdesdev

Về cơ bản, tôi đang diễn giải từ bài viết thực tế này bằng cách sử dụng tăng cường lũy ​​tiến . Câu trả lời ngắn gọn là bạn không bao giờ sử dụng javascript:void(0); hoặc # trừ khi giao diện người dùng của bạn đã suy ra rằng JavaScript được bật, trong trường hợp đó bạn nên sử dụng javascript:void(0);. Ngoài ra, không sử dụng span làm liên kết, vì đó là sai về mặt ngữ nghĩa để bắt đầu.

Sử dụng SEO các tuyến URL thân thiện trong ứng dụng của bạn, chẳng hạn như/Trang chủ/Hành động/Tham số cũng là một cách thực hành tốt. Nếu bạn có một liên kết đến một trang hoạt động mà không có JavaScript trước tiên, bạn có thể nâng cao trải nghiệm sau đó. Sử dụng một liên kết thực sự đến một trang làm việc, sau đó thêm một sự kiện onlick để tăng cường trình bày.

Đây là một mẫu. Home/ChangePicture là một liên kết hoạt động đến một biểu mẫu trên một trang hoàn chỉnh với giao diện người dùng và các nút gửi HTML tiêu chuẩn, nhưng nó trông đẹp hơn được đưa vào một hộp thoại phương thức với các nút jQueryUI. Cả hai cách đều hoạt động, tùy thuộc vào trình duyệt, đáp ứng sự phát triển đầu tiên trên thiết bị di động.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>
13
Josh Simerman

Bạn cũng có thể viết một gợi ý trong một neo như thế này:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

vì vậy người dùng sẽ biết liên kết này làm gì.

11
Lukom

Tôi muốn nói cách tốt nhất là tạo một cái neo cho một ID mà bạn không bao giờ sử dụng, như # Do1Not2Use3 This4Id5 hoặc một ID tương tự, rằng bạn chắc chắn 100% sẽ không ai sử dụng và sẽ không xúc phạm mọi người.

  1. Javascript:void(0) là một ý tưởng tồi và vi phạm Chính sách bảo mật nội dung trên các trang HTTPS hỗ trợ CSP https://developer.mozilla.org/en/docs/Security/CSP (cảm ơn @ jakub.g)
  2. Chỉ sử dụng # sẽ khiến người dùng nhảy trở lại đầu trang khi nhấn
  3. Sẽ không làm hỏng trang nếu JavaScript không được bật (trừ khi bạn có mã phát hiện JavaScript
  4. Nếu JavaScript được bật, bạn có thể tắt sự kiện mặc định
  5. Bạn phải sử dụng href trừ khi bạn biết cách ngăn trình duyệt chọn một số văn bản, (không biết nếu sử dụng 4 sẽ loại bỏ điều khiến trình duyệt không chọn văn bản)

Về cơ bản không ai đề cập đến 5 trong bài viết này mà tôi nghĩ là quan trọng vì trang web của bạn không hoạt động nếu nó đột nhiên bắt đầu chọn những thứ xung quanh liên kết.

11
Anders M.

Thật tuyệt khi có thể truy cập trang web của bạn bởi người dùng bị vô hiệu hóa JavaScript, trong trường hợp đó, href trỏ đến một trang thực hiện hành động tương tự như JavaScript đang được thực thi. Mặt khác, tôi sử dụng " # " với "return false;" để ngăn hành động mặc định (cuộn lên đầu trang) như những người khác đã đề cập.

Googling cho "javascript:void(0)" cung cấp nhiều thông tin về chủ đề này. Một số trong số họ, như cái này đề cập đến lý do KHÔNG sử dụng void (0) .

10
mmacaulay

Tôi thấy rất nhiều câu trả lời của những người muốn tiếp tục sử dụng các giá trị # cho href, do đó, đây là một câu trả lời hy vọng thỏa mãn cả hai phe:

A) Tôi rất vui khi có javascript:void(0) làm giá trị href của tôi:

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B) Tôi đang sử dụng jQuery và muốn # làm giá trị href của tôi:

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Lưu ý, nếu bạn biết các liên kết sẽ không được tạo động, thay vào đó, hãy sử dụng hàm click:

$('a[href="#"]').click(function(e) {

9
dazbradbury

Có một điều quan trọng hơn cần nhớ ở đây. Mục 508 tuân thủ. Do đó, tôi cảm thấy cần phải chỉ ra rằng bạn cần thẻ neo cho trình đọc màn hình như H&AGRAVE;M để có thể tập trung vào thẻ thông qua tab. Vì vậy, giải pháp "chỉ cần sử dụng JavaScript và quên neo để bắt đầu" không phải là một tùy chọn cho một số điều này. Việc kích hoạt JavaScript bên trong href chỉ cần thiết nếu bạn không đủ khả năng để màn hình nhảy ngược lên trên cùng. Bạn có thể sử dụng thời gian giải quyết trong 0 giây và chạy JavaScript đến nơi bạn cần tập trung nhưng ngay cả lời xin lỗi cũng sẽ nhảy lên trên cùng và sau đó quay lại.

9
rcof

Tôi sử dụng href = "#" cho các liên kết mà tôi muốn có hành vi giả. Sau đó, tôi sử dụng mã này:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

Có nghĩa là nếu href bằng với hàm băm (* = "#"), nó sẽ ngăn hành vi liên kết mặc định, do đó vẫn cho phép bạn viết chức năng cho nó và nó không ảnh hưởng đến các nhấp chuột neo.

9
Vinny Fonseca

Điều tôi hiểu từ những lời của bạn là bạn muốn tạo một liên kết chỉ để chạy mã JavaScript.

Sau đó, bạn nên xem xét rằng có những người chặn JavaScript ngoài đó trong trình duyệt của họ.

Vì vậy, nếu bạn thực sự sẽ chỉ sử dụng liên kết đó để chạy một hàm JavaScript thì bạn nên thêm nó một cách linh hoạt để thậm chí không nhìn thấy nếu người dùng không kích hoạt JavaScript của họ trong trình duyệt và bạn chỉ sử dụng liên kết đó để kích hoạt một hàm JavaScript không có ý nghĩa để sử dụng một liên kết như thế khi JavaScript bị vô hiệu hóa trong trình duyệt.

Vì lý do đó, cả hai đều không tốt khi JavaScript bị vô hiệu hóa.

Và nếu JavaScript được bật và bạn chỉ muốn sử dụng liên kết đó để gọi hàm JavaScript thì

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

cách tốt hơn nhiều so với sử dụng

<a href="#" onclick="myJsFunc();">Link</a>

bởi vì href = "#" sẽ khiến trang thực hiện các hành động không cần thiết.

Ngoài ra, một lý do khác khiến <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> tốt hơn <a href="#" onclick="myJsFunc();">Link</a> là JavaScript được sử dụng làm ngôn ngữ kịch bản mặc định cho hầu hết các trình duyệt. Như một ví dụ về Internet Explorer, sử dụng thuộc tính onclick để xác định loại ngôn ngữ kịch bản sẽ được sử dụng. Trừ khi một ngôn ngữ kịch bản tốt khác xuất hiện, JavaScript cũng sẽ được sử dụng bởi Internet Explorer, nhưng nếu một ngôn ngữ kịch bản khác sử dụng javascript:, thì nó sẽ cho phép Internet Explorer hiểu ngôn ngữ kịch bản nào đang được sử dụng.

Xem xét điều này, tôi thích sử dụng và tập thể dục trên

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

đủ để biến nó thành thói quen và thân thiện với người dùng hơn, vui lòng thêm loại liên kết đó trong mã JavaScript:

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
8
Berker Yüceer

Bạn có thể sử dụng href và xóa tất cả các liên kết chỉ có băm:

HTML:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});
8
vol7ron

Tại sao không sử dụng cái này? Điều này không cuộn trang lên.

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
8
AlxGol

Lý tưởng nhất là bạn nên có một URL thực sự là dự phòng cho người dùng không phải là JavaScript.

Nếu điều này không có ý nghĩa, hãy sử dụng # làm thuộc tính href. Tôi không thích sử dụng thuộc tính onclick vì nó nhúng JavaScript trực tiếp vào HTML. Một ý tưởng tốt hơn sẽ là sử dụng một tệp JS bên ngoài và sau đó thêm trình xử lý sự kiện vào liên kết đó. Sau đó, bạn có thể ngăn sự kiện mặc định để URL không thay đổi để nối thêm # sau khi người dùng nhấp vào nó.

7
Peter

Hoàn toàn đồng ý với tình cảm chung, hãy sử dụng void(0) khi bạn cần và sử dụng URL hợp lệ khi bạn cần.

Sử dụng Viết lại URL bạn có thể tạo các URL không chỉ làm những gì bạn muốn làm với JavaScript bị vô hiệu hóa mà còn cho bạn biết chính xác những gì nó sẽ làm.

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

Về phía máy chủ, bạn chỉ cần phân tích cú pháp URL và chuỗi truy vấn và làm những gì bạn muốn. Nếu bạn khéo léo, bạn có thể cho phép tập lệnh phía máy chủ phản hồi cả hai yêu cầu Ajax và tiêu chuẩn khác nhau. Cho phép bạn có mã tập trung ngắn gọn xử lý tất cả các liên kết trên trang của bạn.

Hướng dẫn viết lại URL

Ưu

  • Hiển thị trên thanh trạng thái
  • Dễ dàng nâng cấp lên Ajax thông qua trình xử lý onclick trong JavaScript
  • Thực tế nhận xét chính nó
  • Giữ thư mục của bạn không bị vấy bẩn với các tệp HTML sử dụng một lần

Nhược điểm

  • Vẫn nên sử dụng event.preventDefault () trong JavaScript
  • Xử lý đường dẫn khá phức tạp và phân tích cú pháp URL ở phía máy chủ.

Tôi chắc chắn có rất nhiều khuyết điểm ngoài kia. Hãy thảo luận về chúng.

7
user394888

Trên một trang web hiện đại, nên tránh sử dụng href nếu phần tử chỉ thực hiện chức năng JavaScript (không phải là một liên kết thực sự).

Tại sao? Sự hiện diện của yếu tố này cho trình duyệt biết đây là liên kết với đích đến. Cùng với đó, trình duyệt sẽ hiển thị chức năng Open In New Tab/Window (cũng được kích hoạt khi bạn sử dụng shift + click). Làm như vậy sẽ dẫn đến việc mở cùng một trang mà không kích hoạt chức năng mong muốn (dẫn đến sự thất vọng của người dùng).

Liên quan đến IE: Kể từ IE8, kiểu dáng phần tử (bao gồm di chuột) hoạt động nếu loại tài liệu được đặt. Các phiên bản khác của IE không thực sự đáng lo ngại nữa.

Chỉ có nhược điểm: Loại bỏ HREF sẽ loại bỏ tabindex. Để khắc phục điều này, bạn có thể sử dụng một nút được tạo kiểu như một liên kết hoặc thêm thuộc tính tabindex bằng cách sử dụng JS.

7
TomDK

Nếu bạn đang sử dụng phần tử <a>, chỉ cần sử dụng phần tử này:

<a href="javascript:myJSFunc();" />myLink</a>

Cá nhân tôi sẽ đính kèm một trình xử lý sự kiện với JavaScript sau này thay vào đó (sử dụng attachEvent hoặc addEventListener hoặc có thể <đặt khung JavaScript yêu thích của bạn ở đây> cũng được).

7
Pablo Cabrera

Đừng đánh mất sự thật rằng URL của bạn có thể cần thiết - onclick được kích hoạt trước khi tham chiếu được theo dõi, vì vậy đôi khi bạn sẽ cần xử lý một số thứ khách hàng trước khi điều hướng khỏi trang.

7
nathaniel

Chỉ để chọn điểm một số khác đã đề cập.

Sẽ tốt hơn nhiều khi liên kết sự kiện 'onload'a hoặc $ (' tài liệu '). Sẵn sàng {}; sau đó để đưa JavaScript trực tiếp vào sự kiện nhấp chuột.

Trong trường hợp JavaScript không khả dụng, tôi sẽ sử dụng a href cho URL hiện tại và có lẽ là điểm neo cho vị trí của liên kết. Trang này vẫn có thể sử dụng được cho mọi người mà không cần JavaScript, những người không nhận thấy sự khác biệt nào.

Khi tôi có nó, đây là một số jQuery có thể giúp:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);
6
Matt Goddard

Nếu bạn sử dụng một liên kết như một cách để chỉ thực thi một số mã JavaScript (thay vì sử dụng một khoảng như D4V360 được đề xuất rất nhiều), chỉ cần làm:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

Nếu bạn đang sử dụng một liên kết với onclick để điều hướng, đừng sử dụng href = "#" làm dự phòng khi JavaScript tắt. Nó thường rất khó chịu khi người dùng nhấp vào liên kết. Thay vào đó, hãy cung cấp cùng một liên kết mà trình xử lý onclick sẽ cung cấp nếu có thể. Nếu bạn không thể làm điều đó, hãy bỏ qua onclick và chỉ sử dụng URI JavaScript trong href.

6
Shadow2531

Tôi đặc biệt thích để JavaScript của tôi ra khỏi đánh dấu HTML của tôi càng nhiều càng tốt. Nếu tôi đang sử dụng <a> làm trình xử lý sự kiện nhấp thì tôi khuyên bạn nên sử dụng <a class="trigger" href="#">Click me!</a>.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

Điều rất quan trọng cần lưu ý là nhiều nhà phát triển ngoài kia tin rằng sử dụng thẻ neo cho trình xử lý sự kiện nhấp là không tốt. Họ muốn bạn sử dụng <span> hoặc <div> với một số CSS có thêm cursor: pointer; cho nó. Đây là một vấn đề nếu tranh luận nhiều.

6
Jesse Atkinson

Bạn không nên sử dụng nội tuyến onclick="something();" trong HTML của mình để không làm ô nhiễm nó với mã vô nghĩa; tất cả các ràng buộc nhấp phải được đặt trong tệp Javascript (* .js).

Đặt ràng buộc như thế này: $('#myAnchor').click(function(){... **return false**;}); hoặc $('#myAnchor').bind('click', function(){... **return false**;});

Sau đó, bạn có một tệp HTML sạch dễ tải (và seo thân thiện) mà không cần hàng ngàn href="javascript:void(0);" và chỉ cần href="#"

6
G. Ghez

Đây là một tùy chọn nữa cho mục đích hoàn chỉnh, ngăn liên kết thực hiện bất cứ điều gì ngay cả khi JavaScript bị vô hiệu hóa và nó ngắn :)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

Nếu id không có trên trang, thì liên kết sẽ không làm gì cả.

Nói chung, tôi đồng ý với câu trả lời của Aaron Wagner, liên kết JavaScript nên được chèn mã JavaScript vào tài liệu.

3
Timo Huovinen

Javascript: void(0); không có giá trị null [Không được chỉ định], điều đó có nghĩa là trình duyệt của bạn sẽ NULL nhấp vào DOM và cửa sổ trở về sai.
[.__.] • '#' không theo DOM hoặc Window trong javascript. điều đó có nghĩa là dấu '#' bên trong neo href là một LINK. Liên kết với cùng một hướng hiện tại.

2
SchoolforDesign

Chỉnh sửa vào tháng 1 năm 2019

Trong HTML5 , sử dụng một phần tử không có thuộc tính href là hợp lệ . Nó được coi là một "siêu liên kết giữ chỗ"

Nếu một phần tử có thuộc tính no href, thì phần tử đó đại diện cho một trình giữ chỗ cho nơi liên kết có thể được đặt, nếu nó có liên quan, chỉ bao gồm nội dung của phần tử.

Thí dụ:

<a>previous</a>

Nếu sau đó bạn muốn làm khác:

1 - Nếu liên kết của bạn không đi bất cứ đâu, đừng sử dụng phần tử <a>. Sử dụng <span> hoặc thứ gì đó phù hợp và thêm CSS :hover để tạo kiểu theo ý muốn.

2 - Sử dụng javascript:void(0) OR javascript:undefined OR javascript:; nếu bạn muốn thô, chính xác và nhanh chóng.

2
Lyes CHIOUKH

Bạn có thể sử dụng javascript: void (0) tại đây thay vì sử dụng # để dừng chuyển hướng thẻ neo đến phần tiêu đề.

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
0
Javed Khan

Đơn giản và được mọi người sử dụng nhiều nhất là javascript: void (0) Bạn có thể sử dụng nó thay vì sử dụng # để dừng chuyển hướng thẻ đến phần tiêu đề =.

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}
0
Dev pokhariya