Tôi nên sử dụng giá trị nào của href href, tôi nên sử dụng cho các liên kết JavaScript, kiểu # # 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>

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

Ba lý do. Việc khuyến khích sử dụng #giữa 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().

Một lý do thứ hai để tránh #là cuối cùng return false;sẽ không thực thi nếu hàm được gọi ném 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 onclicksự kiện đượ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 bất cứ điều gì) trong đánh dấu HTML của tôi trông như thế này:

onclick="someFunc.call(this)"

HOẶC LÀ

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 onclickluôn luôn chứa return false;ở cuối, rằng bất kỳ hàm được gọi nào không gây ra lỗi và nếu bạn tự động gắn một hàm vào thuộc onclicktính, hãy đảm bảo rằng cũng như không ném lỗi mà nó trả về false.

HOẶC LÀ

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

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

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 xem JavaScript không phô trương và tăng cường lũy ​​tiến (cả Wikipedia).

Làm <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 một onclickthuộc tính - đã ổn từ 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êm về điều này trong JavaScript không phô trương .

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

3. Bây giờ 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ỉ không có một hrefthuộc tính nào cả! Bất kỳ thiết lập lại CSS tốt nào cũng sẽ quan tâm đến 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 trong Kiế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 ví dụ Backbone.js được hộp đen

Để biết ví dụ về thành phần Backbone.js có thể mở rộng, hộp đen - 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ỏ hrefthuộc tính trên thành aphần sẽ khiến phần tử không thể truy cập được bằng cách sử dụng tabphím điều hướng. Nếu bạn muốn các phần tử đó có thể truy cập được thông qua tabkhóa, bạn có thể đặt tabindexthuộc tính hoặc sử dụng buttoncác phần tử 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 trong câu trả lời của Tracker1 .

• Việc bỏ qua hrefthuộc tính trên aphần tử sẽ khiến Internet Explorer 6 và Internet Explorer 7 không đảm nhận a:hoverkiểu dáng, đó 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 a.hoverthay vào đó. Đ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 một aphần tử có hrefthuộc tính đ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 bạn thực hiện một event.preventDefault()cuộc gọi nhấp chuột của mình để đả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.

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

javascript:; cũng cư xử như javascript:void(0);

Tôi thành thật đề nghị không. Tôi sẽ sử dụng một cách điệu <button></button>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 onclickthuộc tính 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ạn PHẢI sử 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 (onclick ném), 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ế 0bằ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.

Cái đầu tiên, lý tưởng là có một liên kết thực sự để 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

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 một <span>thẻ có onclick handlerđính kèm với nó 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à <a>thẻ.

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>

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.

Sử dụng chỉ #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 #selfnếu bạn muốn tiết kiệm các nỗ lực đánh máy JavaScript bla, bla,.

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>

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 hrefthuộc tính, sau đó gọi một số hàm JavaScript trong onclick. Lỗ hổng là, họ tự động thêmreturn 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ở lại 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ề truenế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 doSomething()hàm. Nếu nó hoạt động, nó sẽ trở lại true, vì vậy nó sẽ bị phủ định ( false) và path/to/some/URLsẽ không được gọi. Nếu chức năng sẽ trở lại 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ị phủ định truevà path/to/some/URLđược gọi.

#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 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 kích hoạ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.

Tôi khuyên bạn nên sử dụng một <button>yếu tố thay thế, đặc biệt là nếu điều khiển được cho là tạo ra sự 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 bình luận này .)

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 chặ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.

Chắc chắn hàm băm ( #) 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à [nhiều] tốt hơn. 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à "một 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 của 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à "onclick fail".

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ự.

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ô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 ra404 not found lỗi.
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ỡ backnút.

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ự.

Vì vậy, khi bạn đang thực hiện một số điều JavaScript bằng một <a />thẻ và nếu bạn href="#"cũng vậy, bạn có thể thêm return false vào cuối sự kiện (trong trường hợp ràng buộc 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ì nó không nên là một<a> thẻ.

Bạn chỉ có thể sử dụng <button />thay thế để 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 với 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ư thế nàocursor: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ể làm điều đó event.preventDefault()để đạt được điều này nếu bạn đang sử dụng <a>thẻ, nhưng nếu bạn không sử dụng<a> thẻ cho việc này, bạn sẽ có lợi thế, bạn không ' t 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.

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 với CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

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

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

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

Đánh dấu thẻ neo sẽ như thế nào

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

Đủ đơn giản!

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 rõ ràng falsebằng JavaScript
• Nó ngắn gọn súc tích

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

Bạn có thể đính kèm các sự kiện (nhấp, 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 một spanhoặc mộtdiv ?

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ụ: một giải pháp thay thế href), ít nhất họ sẽ 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>thẻ.

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ị vô hiệu hóa JavaScript được hướng đến search.phptrong khi những người xem bằng JavaScript xem chức năng nâng cao của bạn.

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à khácon sự kiện trực tiếp trong HTML.

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

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

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

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

*Ghi chú: Đối với các yếu tố được tạo động, 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 ví dụ jsFiddle đã nói ở trên.

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 này 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 đâu và nếu bạn không muốn gọi 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 có 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.

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 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.

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. Một <span>thẻ là thích hợp hơn nhiều.

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 javascript:void(0)phương pháp 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.

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 tiến bộ . 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ụngjavascript: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 các tuyến URL thân thiện với SEO trong ứng dụng của bạn, chẳng hạn như / Trang chủ / Hành động / Thông 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 khi đượ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>