Hướng dẫn can we call javascript function in href? - chúng ta có thể gọi hàm javascript trong href không?

540

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi muốn chạy một chức năng JavaScript đơn giản khi nhấp chuột mà không cần chuyển hướng.

Có bất kỳ sự khác biệt hoặc lợi ích nào giữa việc thực hiện cuộc gọi JavaScript trong thuộc tính

link text

8 (như thế này):

....

so với việc đặt nó vào thuộc tính

link text

9 (ràng buộc nó với sự kiện

link text

9)?

đã nhìn thấy

3262 Huy hiệu vàng4 Huy hiệu bạc12 Huy hiệu đồng2 gold badges4 silver badges12 bronze badges

hỏi ngày 1 tháng 7 năm 2009 lúc 18:59Jul 1, 2009 at 18:59

SkunkspinnerskunkspinnerSkunkSpinner

11.2K7 Huy hiệu vàng40 Huy hiệu bạc52 Huy hiệu đồng7 gold badges40 silver badges52 bronze badges

2

bad:

link text

good:

link text

better:

link text

Thậm chí tốt hơn 1:

link text

Thậm chí tốt hơn 2:

link text

Tại sao tốt hơn? Vì

link text

1 sẽ ngăn trình duyệt theo liên kết

best:

Sử dụng jQuery hoặc khung tương tự khác để đính kèm trình xử lý onclick theo ID của Element.

$('#myLink').click(function(){ MyFunction(); return false; });

Xám

113K22 Huy hiệu vàng285 Huy hiệu bạc349 Huy hiệu đồng22 gold badges285 silver badges349 bronze badges

Đã trả lời ngày 5 tháng 7 năm 2012 lúc 16:13Jul 5, 2012 at 16:13

25

Việc đặt onclick trong HREF sẽ xúc phạm những người tin tưởng mạnh mẽ vào việc tách nội dung khỏi hành vi/hành động. Lập luận là nội dung HTML của bạn chỉ nên tập trung vào nội dung, không phải vào trình bày hoặc hành vi.

Đường dẫn điển hình ngày nay là sử dụng thư viện JavaScript (ví dụ: jQuery) và tạo một trình xử lý sự kiện bằng thư viện đó. Nó sẽ trông giống như:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

wilbbe01

1.9311 huy hiệu vàng23 Huy hiệu bạc38 Huy hiệu đồng1 gold badge23 silver badges38 bronze badges

Đã trả lời ngày 1 tháng 7 năm 2009 lúc 19:05Jul 1, 2009 at 19:05

ParandparandParand

99,8K45 Huy hiệu vàng151 Huy hiệu bạc185 Huy hiệu Đồng45 gold badges151 silver badges185 bronze badges

8

Về mặt JavaScript, một điểm khác biệt là từ khóa

link text

2 trong trình xử lý

link text

9 sẽ đề cập đến phần tử DOM có thuộc tính ____29 (trong trường hợp này là phần tử

link text

5), trong khi

link text

2 trong thuộc tính

link text

8 sẽ đề cập đến đối tượng

link text

8.

Về mặt trình bày, nếu thuộc tính

link text

8 không có trong một liên kết (nghĩa là

link text

0) thì theo mặc định, các trình duyệt sẽ hiển thị con trỏ

link text

1 (và không phải là con trỏ

link text

2 thường được mong muốn không phải là một liên kết.

Về mặt hành vi, khi chỉ định một hành động theo điều hướng qua

link text

8, trình duyệt thường sẽ hỗ trợ mở

link text

8 trong một cửa sổ riêng biệt bằng cách sử dụng menu tắt hoặc bối cảnh. Điều này là không thể khi chỉ định một hành động chỉ thông qua

link text

9.

---

Tuy nhiên, nếu bạn đang hỏi cách tốt nhất để có được hành động năng động từ lần nhấp vào đối tượng DOM, thì việc gắn một sự kiện bằng JavaScript tách biệt với nội dung của tài liệu là cách tốt nhất để đi. Bạn có thể làm điều này theo một số cách. Một cách phổ biến là sử dụng thư viện JavaScript như JQuery để ràng buộc một sự kiện:

link text

Đã trả lời ngày 1 tháng 7 năm 2009 lúc 19:54Jul 1, 2009 at 19:54

AdamadamAdam

1.7241 Huy hiệu vàng14 Huy hiệu bạc33 Huy hiệu đồng1 gold badge14 silver badges33 bronze badges

1

Cảnh báo biên tập: Xem các nhận xét, việc sử dụng 'Nohref' là không chính xác trong câu trả lời này.

tôi sử dụng

Click HERE

Một chặng đường dài nhưng nó được hoàn thành công việc. Sử dụng một kiểu A để đơn giản hóa sau đó nó trở thành:

link text

0

Cameron

2.7431 Huy hiệu vàng29 Huy hiệu bạc 30 Huy hiệu Đồng1 gold badge29 silver badges30 bronze badges

Đã trả lời ngày 29 tháng 2 năm 2012 lúc 3:01Feb 29, 2012 at 3:01

4

Câu trả lời hàng đầu là một thực tế rất tệ, người ta không bao giờ nên liên kết với một hàm băm trống vì nó có thể tạo ra vấn đề trên đường.

Tốt nhất là liên kết một người xử lý sự kiện với yếu tố như nhiều người khác đã nêu, tuy nhiên,

link text

7 hoạt động hoàn hảo trong mọi trình duyệt hiện đại và tôi sử dụng nó một cách rộng rãi khi kết xuất các mẫu để tránh phải phản hồi cho từng trường hợp. Trong một số trường hợp, phương pháp này cung cấp hiệu suất tốt hơn. Ymmv

Một mẩu tin thú vị khác ...

link text

9 &

link text

8 có những hành vi khác nhau khi gọi trực tiếp JavaScript.

link text

9 sẽ vượt qua

link text

2 Bối cảnh chính xác, trong khi

link text

8 sẽ không hoặc nói cách khác

link text

3 sẽ không hoạt động, trong khi

link text

4 sẽ.

Vâng, tôi đã bỏ qua

link text

8. Mặc dù điều đó không tuân theo thông số kỹ thuật, nhưng nó sẽ hoạt động trong tất cả các trình duyệt, mặc dù, lý tưởng nhất là nó nên bao gồm một

link text

6 để đo lường tốt

Đã trả lời ngày 11 tháng 3 năm 2017 lúc 8:01Mar 11, 2017 at 8:01

Slothstronautslothstronautslothstronaut

8221 Huy hiệu vàng12 Huy hiệu bạc14 Huy hiệu đồng1 gold badge12 silver badges14 bronze badges

1

Cách tốt nhất để làm điều này là với:

link text

1

Vấn đề là điều này sẽ thêm hàm băm (#) vào cuối URL của trang trong trình duyệt, do đó yêu cầu người dùng nhấp vào nút quay lại hai lần để đi đến trang trước bạn. Xem xét điều này, bạn cần thêm một số mã để dừng truyền bá sự kiện. Hầu hết các bộ công cụ JavaScript sẽ có một chức năng cho việc này. Ví dụ: bộ công cụ DOJO sử dụng

link text

2

làm như vậy.

Đã trả lời ngày 2 tháng 7 năm 2009 lúc 2:29Jul 2, 2009 at 2:29

linusthe3rdlinusthe3rdlinusthe3rd

3.3453 huy hiệu vàng27 Huy hiệu bạc42 Huy hiệu đồng3 gold badges27 silver badges42 bronze badges

3

Ngoài tất cả ở đây, HREF được hiển thị trên thanh trạng thái của trình duyệt và onclick thì không. Tôi nghĩ rằng nó không thân thiện với người dùng để hiển thị mã JavaScript ở đó.

Đã trả lời ngày 1 tháng 7 năm 2009 lúc 19:09Jul 1, 2009 at 19:09

KamareykamareyKamarey

10,6K7 Huy hiệu vàng56 Huy hiệu bạc69 Huy hiệu Đồng7 gold badges56 silver badges69 bronze badges

Những công việc này

link text

3

Đã trả lời ngày 8 tháng 2 năm 2018 lúc 8:19Feb 8, 2018 at 8:19

TitusMixTitusMixTitusMix

1012 Huy hiệu bạc9 Huy hiệu đồng2 silver badges9 bronze badges

1

Có

link text

7 trong bất kỳ thuộc tính nào không dành riêng cho kịch bản là một phương pháp HTML lỗi thời. Mặc dù về mặt kỹ thuật, nó hoạt động, bạn vẫn đang gán các thuộc tính JavaScript cho một thuộc tính không kịch bản, không phải là thực tiễn tốt. Nó thậm chí có thể thất bại trên các trình duyệt cũ, hoặc thậm chí một số người hiện đại (một bài đăng trên diễn đàn googled dường như chỉ ra rằng Opera không thích 'JavaScript:' URLS).

Một thực tế tốt hơn sẽ là cách thứ hai, để đưa JavaScript của bạn vào thuộc tính

link text

9, bị bỏ qua nếu không có chức năng kịch bản. Đặt một URL hợp lệ trong trường HREF (thường là '#') cho dự phòng cho những người không có JavaScript.

Đã trả lời ngày 1 tháng 7 năm 2009 lúc 19:10Jul 1, 2009 at 19:10

Zombatzombatzombat

91.1K24 Huy hiệu vàng156 Huy hiệu bạc164 Huy hiệu đồng24 gold badges156 silver badges164 bronze badges

2

Nó hoạt động cho tôi bằng cách sử dụng dòng mã này:

link text

4

Đã trả lời ngày 10 tháng 12 năm 2014 lúc 15:14Dec 10, 2014 at 15:14

Đầu tiên, có URL trong

link text

8 là tốt nhất vì nó cho phép người dùng sao chép các liên kết, mở trong một tab khác, v.v.

Trong một số trường hợp (ví dụ: các trang web có thay đổi HTML thường xuyên), việc liên kết liên kết thường xuyên không thực tế mỗi khi có bản cập nhật.

Phương pháp liên kết điển hình

Liên kết bình thường:

link text

5

Và một cái gì đó như thế này cho JS:

link text

6

Lợi ích của phương pháp này là sự tách biệt rõ ràng của đánh dấu và hành vi và không phải lặp lại các cuộc gọi chức năng trong mọi liên kết.

Không có phương thức liên kết

Tuy nhiên, nếu bạn không muốn ràng buộc mọi lúc, bạn có thể sử dụng onclick và vượt qua trong phần tử và sự kiện, ví dụ:

link text

7

Và điều này cho JS:

link text

8

Lợi ích của phương pháp này là bạn có thể tải trong các liên kết mới (ví dụ: thông qua AJAX) bất cứ khi nào bạn muốn mà không phải lo lắng về việc ràng buộc mọi lúc.

Đã trả lời ngày 2 tháng 3 năm 2019 lúc 21:05Mar 2, 2019 at 21:05

Jchavannesjchavannesjchavannes

2.2101 Huy hiệu vàng25 Huy hiệu bạc13 Huy hiệu đồng1 gold badge25 silver badges13 bronze badges

Cá nhân, tôi thấy việc thực hiện các cuộc gọi JavaScript trong thẻ HREF gây phiền nhiễu. Tôi thường không thực sự chú ý đến việc một cái gì đó có phải là liên kết JavaScript hay không và thường xuyên muốn mở mọi thứ trong một cửa sổ mới. Khi tôi thử làm điều này với một trong những loại liên kết này, tôi sẽ nhận được một trang trống mà không có gì trên đó và JavaScript trong thanh vị trí của tôi. Tuy nhiên, điều này đã được bỏ qua một chút bằng cách sử dụng một onlick.

Đã trả lời ngày 1 tháng 7 năm 2009 lúc 19:08Jul 1, 2009 at 19:08

PeterpeterPeter

4212 Huy hiệu bạc8 Huy hiệu Đồng2 silver badges8 bronze badges

Câu trả lời được nâng cấp nhiều nhất là lỗi thời hôm nay

Tôi muốn giới thiệu hoàn toàn ngược lại, xem từng bước một với lý do:

good:

link text

Nó phụ thuộc, có thể là tốt, bởi vì các trình thu thập thông tin tuân theo các mục tiêu của HREF và nếu có bất kỳ nội dung có ý nghĩa nào được tạo bởi

$('#myLink').click(function(){ MyFunction(); return false; });

0 (liên kết động), thì có nhiều khả năng hơn trong sự kiện nhấp chuột, có thể có nhiều hoặc không có người nghe.

bad::

link text

$('#myLink').click(function(){ MyFunction(); return false; });

1 có nghĩa là liên kết vô nghĩa, trình thu thập thông thường chỉ quan tâm đến các liên kết X đầu tiên, vì vậy nó có thể ngăn chúng theo một số liên kết có ý nghĩa sau này trong trang.

worse:

link text

Giống như trước đây cộng với

link text

1 ngăn chặn theo liên kết. Nếu một số tập lệnh khác muốn thêm người nghe khác và cập nhật mục tiêu (giả sử chuyển hướng qua proxy), chúng không thể sửa đổi onclick (không sao, đó chỉ là một thất bại nhỏ vì các trường hợp sử dụng đó là thay vì lý thuyết).

worst:

Sử dụng jQuery hoặc khung tương tự khác để đính kèm trình xử lý onclick theo ID của Element.

$('#myLink').click(function(){ MyFunction(); return false; });

JQuery đã lỗi thời vào năm 2020 và không nên được sử dụng trong các dự án mới.

Các sự kiện trong href

Trình xử lý thuộc tính HREF không nhận được đối tượng sự kiện, vì vậy trình xử lý không ngầm thấy liên kết nào là nguồn. Bạn có thể thêm nó vào Onclick Handler, nơi bắn trước khi HREF được theo dõi:

link text

3

Đã trả lời ngày 23 tháng 11 năm 2021 lúc 8:58Nov 23, 2021 at 8:58

Jan Turoňjan TuroňJan Turoň

29,7K21 Huy hiệu vàng117 Huy hiệu bạc163 Huy hiệu đồng21 gold badges117 silver badges163 bronze badges

Một điều nữa mà tôi nhận thấy khi sử dụng "HREF" với JavaScript:

Tập lệnh trong thuộc tính "HREF" sẽ không được thực thi nếu chênh lệch thời gian giữa 2 lần nhấp khá ngắn.

Ví dụ: cố gắng chạy ví dụ sau và nhấp đúp chuột (nhanh!) Trên mỗi liên kết. Liên kết đầu tiên sẽ chỉ được thực hiện một lần. Liên kết thứ hai sẽ được thực hiện hai lần.

link text

4

Được sao chép trong Chrome (nhấp chuột đôi) và IE11 (với nhấp chuột ba). Trong Chrome nếu bạn nhấp vào đủ nhanh, bạn có thể thực hiện 10 lần nhấp và chỉ có 1 thực thi chức năng.

Firefox hoạt động ok.

Đã trả lời ngày 15 tháng 12 năm 2016 lúc 9:59Dec 15, 2016 at 9:59

Kolobokkolobokkolobok

3,4793 huy hiệu vàng36 Huy hiệu bạc53 Huy hiệu đồng3 gold badges36 silver badges53 bronze badges

link text

5

Đã trả lời ngày 7 tháng 12 năm 2017 lúc 17:03Dec 7, 2017 at 17:03

Tôi đã trải nghiệm rằng JavaScript: HREFS không hoạt động khi trang được nhúng vào tính năng trang web của Outlook trong đó thư mục thư được đặt để hiển thị URL

Đã trả lời ngày 16 tháng 12 năm 2018 lúc 6:40Dec 16, 2018 at 6:40

ChristianchristianChristian

2.8124 Huy hiệu vàng31 Huy hiệu bạc33 Huy hiệu Đồng4 gold badges31 silver badges33 bronze badges

link text

6

Đã trả lời ngày 24 tháng 3 năm 2021 lúc 12:11Mar 24, 2021 at 12:11

1

Điều này cũng hoạt động

link text

7

(Onclick) Không làm việc cho tôi trong một dự án góc cạnh với Bootstrap.

Đã trả lời ngày 21 tháng 5 năm 2021 lúc 8:59May 21, 2021 at 8:59

Chúng ta có thể chuyển chức năng cho href không?

Bạn có thể gọi chức năng JS trong HTML không?

Chúng ta có thể gọi chức năng trong thẻ neo không?

Làm thế nào để bạn làm href trong javascript?