a

Câu hỏi 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 một liên kết có mục đích duy nhất là chạy mã JavaScript. Điều nào là tốt hơn, về chức năng, tốc độ tải trang, mục đích xác thực, 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>


3677


gốc


Trừ khi tôi đang thiếu cái gì đó, <a href="javascript:void(0)" onclick="myJsFunc();"> làm cho hoàn toàn không có ý nghĩa. nếu bạn phải sử dụng javascript: psuedo-protocol, bạn không cần onclick cũng như thuộc tính. <a href="javascript:myJsFunc();"> sẽ làm tốt. - Wesley Murch
@WesleyMurch - Nếu myJsFunc() có giá trị trả về, trang của bạn sẽ bị hỏng. jsfiddle.net/jAd9G  Bạn vẫn phải sử dụng void như vậy: <a href="javascript:void myJsFunc();">. Nhưng sau đó, hành vi sẽ vẫn khác nhau. Gọi liên kết qua menu ngữ cảnh không kích hoạt click biến cố. - gilly3
Tại sao không chỉ <a href="javascript:;" onclick="myEvent()"? - 3k-
javascript:; nhanh hơn rất nhiều so với javascript:void(0) - Mike Causer
Đầu tiên nghĩ khi nhìn vào điều này: "tại sao bạn sẽ sử dụng một <a> nếu những gì bạn muốn làm là không mở một trang khác thông qua tính năng trình duyệt gốc mà là có một số 'hành động' javascript được kích hoạt? chỉ cần sử dụng một span gắn thẻ với một lớp js-triggercó lẽ sẽ tốt hơn nhiều ". Hay tôi đang thiếu một cái gì đó? - Adrien Be


Các câu trả lời:


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

Ba lý do. Khuyến khích việc 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ố người 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à trận chung kết return false; 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ó những trường hợp onclick thuộc tính sự kiện đượ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 đó tôi onclick (hoặc trên bất kỳ thứ gì) trong đánh dấu HTML giống như sau:

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 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 thì bạn rõ ràng có thể đưa ra lựa chọn của riêng bạn, nhưng nếu bạn làm việc như một nhóm bạn phải hoặc là nhà nước:

Sử dụng href="#", bảo đảm onclick luôn luôn chứa return false; ở cuối, bất kỳ hàm được gọi nào cũng không ném một lỗi và nếu bạn đính kèm một hàm động vào onclick tài sản chắc chắn rằng cũng như không ném một lỗi 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 để giao tiếp.


2009



Tôi luôn mở mọi liên kết trong một tab mới và đây là lý do tại sao cá nhân tôi ghét nó khi mọi người sử dụng href="javascript:void(0)" phương pháp - Timo Huovinen
Xin lỗi, không đồng ý tại sao câu trả lời này lại có quá nhiều upvotes? Bất kỳ việc sử dụng nào javascript: nên được coi là thực hành xấu, khó chịu và không duyên dáng de-grade. - Lankymart
Hai câu trả lời tiếp theo tốt hơn và hợp lý hơn câu trả lời này. Ngoài ra, hai đối số đầu tiên không hợp lệ vì event.preventDefault() là có chính xác để ngăn chặn hành vi mặc định (như nhảy lên đầu trang trong trường hợp này) và làm một công việc tốt hơn ở đó mà không cần tất cả return false; điên cuồng. - sudee
Tua nhanh đến năm 2013: javascript:void(0) vi phạm Chính sách bảo mật nội dung trên các trang HTTPS có hỗ trợ CSP. Một lựa chọn sau đó sẽ được sử dụng href='#' và event.preventDefault() trong xử lý, nhưng tôi không thích điều này nhiều. Có lẽ bạn có thể thiết lập một quy ước để sử dụng href='#void' và đảm bảo không có phần tử nào trên trang id="void". Bằng cách đó, việc nhấp vào liên kết đến neo không tồn tại sẽ không cuộn trang. - jakub.g
Bạn có thể sử dụng "#" và sau đó liên kết sự kiện nhấp chuột với tất cả các liên kết bằng "#" làm href. Điều này sẽ được thực hiện trong jQuery với: $('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; }); - Nathan


Cũng không.

Nếu bạn có thể có một URL thực sự có ý nghĩa sử dụng như là HREF. Onclick sẽ không kích hoạt nếu ai đó nhấp chuột giữa vào liên kết của bạn để mở một 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à 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 ý kiến ​​của tôi, nó cần được phấn đấu để phát triển bất kỳ trang web công cộng nào.

Kiểm tra JavaScript không phô trương và Tăng cường tiến bộ (cả Wikipedia).


1201



Bạn có thể đưa ra ví dụ về cách người ta có thể "tiêm thẻ neo vào tài liệu bằng JavaScript và trình xử lý sự kiện nhấp chuột thích hợp" không? - user456584
Tại sao tiêm thẻ neo ở tất cả nếu nó chỉ đơn thuần có nghĩa là được sử dụng để cho phép một phần tử được a) nhấp b) hiển thị con trỏ "con trỏ". Có vẻ như không thích hợp để thậm chí tiêm một thẻ neo trong kịch bản này. - crush
1 cho không, nhưng có nhiều cách tiếp cận. Thực tế vẫn sử dụng một trong hai javascript: hoặc là # đều là những thực hành không tốt và không được khuyến khích. Bài viết đẹp btw. - Lankymart
@crush: Tôi cũng sẽ không sử dụng div hoặc span; thẳng thắn, điều này có vẻ giống như <button> đã được thực hiện cho. Nhưng đã đồng ý: có lẽ không nên cụ thể là <a> nếu không có nơi phù hợp để liên kết. - cHao
@cHao Button có lẽ là lựa chọn tốt nhất. Tôi cho rằng điểm chính là yếu tố HTML không nên được chọn dựa trên giao diện trình bày mặc định của nó, mà là ý nghĩa của nó đối với cấu trúc của tài liệu. - crush


Đang làm <a href="#" onclick="myJsFunc();">Link</a> hoặc là <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> hoặc bất kỳ thứ gì khác có chứa onclick thuộc tính - đã ổn định từ năm năm trước, mặc dù bây giờ nó có thể là một thực hành 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 - vốn đã trở nên khó khăn để duy trì và khó mở rộng. Thông tin thêm về điều này trong JavaScript không phô trương.

  2. Bạn đang dành thời gian của mình để viết mã cực kỳ quá mức - vốn có rất ít lợi ích (nếu có) cho codebase của bạn.

  3. Hiện tại, có các cách tốt hơn, dễ dàng hơn và dễ bảo trì hơn và có khả năng 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ó một href thuộc tính! 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 phương pháp hay nhất và dễ bảo trì hơn, vì JavaScript của bạn vẫn được duy trì trong JavaScript, thay vì đánh dấu - đ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. thành phần hộp đen và mẫu. 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ụ về 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>

Hộp đen Backbone.js thí dụ

Đối với ví dụ thành phần, hộp đen Backbone.js có thể mở rộng - xem ví dụ jsfiddle đang hoạt động ở đây. Lưu ý cách chúng ta sử dụng các thực hành 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 cá thể thành phần khác nhau. Kinh ngạc!

Ghi chú

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

  • Bỏ qua href thuộc tính trên a yếu tố sẽ gây ra Internet Explorer 6 và Internet Explorer 7 không tiếp nhận a:hover phong cách, đó là lý do tại sao chúng tôi đã thêm một shim JavaScript đơn giản để thực hiện điều này thông qua a.hover thay thế. Đó là hoàn toàn ổn, như thể bạn không có một thuộc tính href và không có suy thoái duyên dáng sau đó liên kết của bạn sẽ không làm việc anyway - và bạn sẽ có vấn đề lớn hơn phải 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ì hãy sử dụng a yếu tố với một href thuộc tính mà đ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 một yêu cầu Ajax hoặc bất cứ điều gì nên là con đường để đi. Nếu bạn đang làm điều này, thì bạn muốn đảm bảo bạn làm event.preventDefault() vào cuộc gọi nhấp để đảm bảo khi nút được nhấp vào, nó không theo liên kết. Tùy chọn này được gọi là sự xuống cấp duyên dáng.


735



Hãy cẩn thận, để lại các thuộc tính href không tương thích với trình duyệt và bạn sẽ mất những thứ như hiệu ứng di chuột trong trình duyệt internet - Thomas Davis
Tôi có xu hướng đồng ý với câu trả lời này, nhưng có một vấn đề khác phát sinh từ việc bỏ qua thuộc tính href. Trong nhiều trình duyệt nếu bạn nhấp vào liên kết nhiều lần rất nhanh, nó sẽ thực sự chọn văn bản trên trang. Việc thiết lập href giải quyết vấn đề cụ thể mà không phải là dễ dàng để sửa chữa khác. - Christopher Camps
Cẩn thận: liên kết theo kiểu button phương pháp tiếp cận được đề xuất ở đây bị cản bởi trạng thái hoạt động "3d" không thể tránh khỏi trong IE9 và thấp hơn. - Brennan Roberts
Tôi thấy câu trả lời này là quá giáo điều. Có những lúc bạn chỉ muốn áp dụng hành vi JS cho 1 hoặc 2 a href. Trong trường hợp đó, nó quá cần thiết để xác định thêm CSS và tiêm một hàm JS toàn bộ. Trong một số trường hợp (ví dụ: thêm nội dung qua CMS), bạn thực sự không được phép để chèn CSS mới hoặc JS độc lập và nội tuyến là tất cả những gì bạn có thể làm. Tôi không thấy giải pháp nội tuyến sẽ kém bền vững hơn thế nào trong thực tế cho 1 hoặc 2 đơn giản JS a href. Luôn luôn nghi ngờ các tuyên bố chung chung về thực hành xấu, bao gồm cả điều này :) - Jordan Rieger
Với tất cả những "ghi chú" khó giải quyết (thiết lập một tabindex đang yêu cầu sự cố trên một trang phức tạp!). Tốt hơn là chỉ cần làm javascript:void(0). Đó là câu trả lời thực dụng, và câu trả lời hợp lý duy nhất trong thế giới thực. - Abhi Beckert


'#' 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 cư xử như javascript:void(0);


281



Cách để tránh điều đó là trả về false trong trình xử lý sự kiện onclick. - Guvante
Trả về false trong trình xử lý sự kiện không tránh được điều đó nếu JavaScript JS không chạy thành công. - Quentin
sử dụng "#someNonExistantAnchorName" hoạt động tốt vì không có nơi nào để chuyển đến. - scunliffe
Nếu bạn có một href cơ bản, thì # hoặc là #something sẽ đưa bạn đến đó neo trên cơ sở href trang, thay vì trên trang hiện tại. - Abhi Beckert
The shebang (#!) thực hiện mẹo nhưng đó thực sự là hành động không tốt. - Neel


Tôi thành thật đề nghị không. Tôi sẽ sử dụng 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 đề xuất ràng buộc thông qua tập lệnh, không sử dụng onclick thuộc tính trên thẻ phần tử. Dấu hiệu duy nhất là hiệu ứng văn bản 3d psuedo trong các trình duyệt IE cũ hơn mà không thể tắt được.


nếu bạn PHẢI sử dụng phần tử A, 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ó cuộc gọi tải không đúng, 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 qua (ném onclick), tránh nó trừ khi đó là hành vi thu gọn 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 với một chuỗi như javascript:void('Delete record 123') có thể phục vụ như một chỉ báo bổ sung sẽ cho biết nhấp chuột thực sự sẽ làm gì.


209



Trong IE8 / IE9, tôi không thể loại bỏ bù đắp 1px "3D" trong nút: trạng thái hoạt động. - Brennan Roberts
@BrennanRoberts Vâng, thật không may, bất kỳ phong cách của các nút là vấn đề với IE ... Tôi vẫn cảm thấy nó có lẽ là cách tiếp cận thích hợp nhất, không phải là tôi không phá vỡ quy tắc của riêng tôi vào dịp. - Tracker1
Sau đó không sử dụng <button> nhưng một input type=button thay thế? - Patrik Affentranger
Sau đó sử dụng <clickable> thành phần. Hoặc một <clickabletim> nếu bạn thích. Thật không may, việc sử dụng thẻ không chuẩn hoặc div đồng bằng có thể khiến người dùng bàn phím khó tập trung phần tử. - joeytwiddle
Câu trả lời này nên được lên hàng đầu. Nếu bạn đang gặp khó khăn này, rất có thể bạn đang thực sự cần một button. Và IE9 nhanh chóng mất thị phần, may mắn thay, và hiệu ứng hoạt động 1px không nên ngăn cản chúng tôi sử dụng đánh dấu ngữ nghĩa. <a> là một liên kết, nó có nghĩa là để gửi cho bạn một nơi nào đó, cho hành động chúng tôi có <button>'S. - mjsarfatti


Điều đầu tiên, lý tưởng nhất là với một liên kết thực sự để theo dõi trong trường hợp người dùng đã tắt JavaScript. Chỉ cần đảm bảo trả về false để ngăn sự kiện nhấp 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 ở đây https://stackoverflow.com/a/45465728/2803344


128



Vì vậy, trong các tác nhân người dùng với JavaScript được kích hoạt và chức năng hỗ trợ điều này chạy một chức năng JavaScript, giảm trở lại (cho các đại lý người dùng mà JS không vì lý do gì) để một liên kết đến đầu trang? Đây hiếm khi là một dự phòng hợp lý. - Quentin
"lý tưởng với một liên kết thực sự để làm theo trong trường hợp người dùng đã tắt JavaScript", nó sẽ đi đến một trang hữu ích không #, ngay cả khi nó chỉ là một lời giải thích rằng trang web cần JS để làm việc. vì thất bại, tôi hy vọng nhà phát triển sẽ sử dụng tính năng phát hiện tính năng trình duyệt thích hợp, v.v. trước khi triển khai. - Zach
Tôi sẽ giả định (hy vọng) rằng một cái gì đó như thế này sẽ chỉ được hiển thị một popup hoặc một cái gì đó tương tự đơn giản. Trong trường hợp đó, mặc định sẽ là url của trang popup. Nếu đây là một phần của một ứng dụng web, hoặc có JS bị vô hiệu hóa hoàn toàn sẽ phá vỡ trang, sau đó mã này có các vấn đề khác ... - Brian Moeskau
Các ứng dụng web của tôi được thiết kế để giảm thiểu một cách duyên dáng, do đó liên kết sẽ vẫn là một trang hữu ích. Trừ khi ứng dụng web của bạn là một ứng dụng trò chuyện hoặc một cái gì đó tương tác, điều này sẽ làm việc nếu bạn đặt trong thời gian để thiết kế với suy thoái trong tâm trí. - Zach
Vấn đề là nếu myJsFunc ném một lỗi, nó sẽ không bị bắt vì trả về false. - Tracker1


Tốt nhất bạn nê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 sẽ 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ử không phô trương qua JavaScript sau khi DOM hiển thị, do đó đảm bảo rằng nếu JavaScript không hiện diện / sử dụng thì bạn không có xử lý sự kiện vô ích riddling mã của bạn và có khả năng obfuscating (hoặc ít nhất là distracting từ) nội dung thực tế của bạn.


90





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, 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 kết hợp với nó. Tôi khuyên bạn nên sử dụng <span> gắn thẻ với một onclick handler gắn liền với nó và một số CSS cơ bản để bắt chước một liên kết. Các liên kết được thực hiện để điều hướng và nếu mã JavaScript của bạn không phải để điều hướng, thì nó không phải là một <a> nhãn.

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>


86



Cách tiếp cận này hạn chế 'liên kết' thành thao tác chỉ với chuột. Có thể truy cập một neo thông qua bàn phím và sự kiện 'onclick' được kích hoạt khi nhấn phím enter. - AnthonyWJones
Mã hóa cứng trong CSS của bạn sẽ ngăn trình duyệt sử dụng các màu tùy chỉnh mà người dùng có thể xác định, điều này có thể là vấn đề với khả năng truy cập. - Hosam Aly
<span>không có nghĩa là làm bất cứ điều gì. <A>nchors và <buttons> được sử dụng cho điều đó! - redShadow
Sử dụng buttons là lựa chọn tốt hơn ở đây khi sử dụng span không phải là. - apnerve
Tôi nghĩ rằng một khoảng thời gian là tốt hơn so với một thẻ neo. Thẻ neo tồn tại để hướng bạn đến thuộc tính href bắt buộc của nó. Nếu bạn không sử dụng href, đừng dùng neo. Nó không hạn chế liên kết đến chuột chỉ vì nó không phải là một liên kết. Nó không có một href. Nó giống như một nút nhưng nó không đăng. Khoảng không có nghĩa là làm bất cứ điều gì là hoàn toàn không hợp lệ. Hãy xem xét một trình đơn thả xuống kích hoạt khi bạn di chuột. Nó có thể là một sự kết hợp của nhịp và div, thực hiện chức năng của một nút mở rộng một khu vực trên màn hình. - NibblyPig


Chỉ sử dụng # tạo ra một số động tác 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 nỗ lực đánh máy JavaScript bla, bla,.


73



WOW, hãy cố gắng tìm mẹo này. Không bao giờ biết rằng bạn có thể sử dụng #self cho các thẻ được đặt tên và tránh hành vi của trình duyệt gây phiền nhiễu khi nhảy lên đầu trang. Cảm ơn bạn. - alonso.torres
Để tham khảo, #self dường như không đặc biệt. Bất kỳ số nhận dạng phân đoạn nào không khớp với tên hoặc id của bất kỳ phần tử nào trong tài liệu (và không phải là trống hoặc "trên cùng") sẽ có cùng tác dụng. - cHao
Tôi thường chỉ sử dụng một tên neo được tạo sẵn, nhưng tôi nghĩ rằng tôi sẽ bắt đầu làm điều này để nhất quán trong công việc của tôi. - Douglas.Sesar
Tôi đề nghị thiết lập #void ước trong bình luận khác nhưng thực sự #self ngắn và dễ nhớ. Bất cứ điều gì tốt hơn # - jakub.g
Nhưng nếu bạn nhấp vào liên kết đó, người dùng sẽ thấy lạ khi thấy "#void" trong url, có vẻ như và lỗi hoặc lỗi, giống với #self hoặc bất kỳ thứ gì. - pmirnd


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>

55



tôi sử dụng javascript: (không có dấu chấm phẩy) bởi vì nó trông tidiest trên thanh trạng thái khi di chuột. - Boann
Mã này có thể gây ra những bất ngờ xấu trong IE cũ hơn. Tại một số thời điểm nó được sử dụng để phá vỡ bất kỳ hiệu ứng hình ảnh động với hình ảnh, bao gồm cả rollovers và thậm chí gifs động: groups.google.com/forum/#!topic/comp.lang.javascript/… - Ilya Streltsyn
Bạn luôn có thể làm ... javascript:void('Do foo') kể từ khi void sẽ trả về undefined bất kể, nó sẽ đưa ra một chỉ số cho người dùng nhấp chuột sẽ làm gì. Ở đâu Do foo có thể Delete record X hoặc bất cứ điều gì bạn thích. - Tracker1


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 href thuộc tính, sau đó gọi một số hàm JavaScript trong onclick. Lỗ hổng là, chúng tự động thêm vào return false sau cuộc gọi.

Vấn đề với phương pháp 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 đề gì, liên kết sẽ trở nên không thể nhấp được. Sự kiện onclick sẽ luôn quay trở lại false, do đó, URL bình thường sẽ không được gọi.

Có giải pháp rất đơn giản. Hãy trả về hàm true nếu nó hoạt động chính xác. Sau đó, sử dụng giá trị trả lại để xác định xem nhấp chuột có bị hủy 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() chức năng. Nếu nó hoạt động, nó sẽ trở lại true, vì vậy nó sẽ bị phủ nhận (false) và path/to/some/URL sẽ không được gọi. Nếu hàm sẽ trả về false (ví dụ, trình duyệt không hỗ trợ một cái gì đó được sử dụng trong các chức năng hoặc bất cứ điều gì khác đi sai), nó được phủ nhận để true và path/to/some/URL được gọi là.


50