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]?
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ếtbest:
Sử dụng jQuery hoặc khung tương tự khác để đính kèm trình xử lý title 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 title 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
$['a#link'].click[function[]{ /* ... action ... */ }]
Đã 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 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. YmmvMộ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
1Vấ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
2là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à title 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
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
link text 4
Đã trả lời ngày 10 tháng 12 năm 2014 lúc 15:14Dec 10, 2014 at 15:14
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
5Và một cái gì đó như thế này cho JS:
link text
6Lợ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 title và vượt qua trong phần tử và sự kiện, ví dụ:
link text
7Và điều này cho JS:
link text
8Lợ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 title [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ý title 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
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