Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

So sánh JavaScript trong href và onClick: Khác biệt và thực hành tốt nhất

Việc gọi JavaScript qua thuộc tính href và sự kiện onclick có hành vi khác biệt quan trọng, ảnh hưởng đến UX, SEO và bảo mật.

So sánh nhanh

Đặc điểmhref="javascript:..."onclick="..."
Ngữ nghĩa HTMLVi phạm: <a> không còn là liên kếtĐúng: <a> vẫn là liên kết (có href hợp lệ)
AccessibilityKém: Screen reader không hiểuTốt: Vẫn hoạt động như liên kết
SEOKhông theo dõi được liên kếtBot có thể crawl href
Mở tab mớiKhông hoạt động (Ctrl+Click)Hoạt động nếu href hợp lệ
Lịch sử duyệtGhi nhận "javascript:..."Ghi nhận URL thực
Content Security PolicyThường bị chặn bởi CSPAn toàn hơn với CSP
Double-click protectionCó độ trễ giữa 2 clickKhông có vấn đề này

Ví dụ minh họa

<!-- Cách không khuyến khích -->
<a href="javascript:myFunc()">Gọi qua href</a>

<!-- Cách tốt hơn -->
<a href="#" onclick="myFunc(); return false;">Gọi qua onclick</a>

<!-- Cách tốt nhất (Unobtrusive JS) -->
<a href="/fallback-url" id="myLink">Liên kết đúng ngữ nghĩa</a>

<script>
  document.getElementById('myLink').addEventListener('click', function(e) {
    e.preventDefault(); // Ngăn điều hướng
    myFunc();
  });
</script>

Giải thích ví dụ gốc

Mã gốc demo hàm myFunc() tính tổng 0..999 và alert kết quả. Việc đặt trong <head> là không hợp lệ (nội dung hiển thị phải trong <body>).

Thực hành tốt nhất hiện đại

  1. Tách biệt HTML và JS: Gán sự kiện bằng addEventListener.
  2. Luôn có href hợp lệ: Dẫn đến trang fallback hoặc # kèm return false.
  3. Dùng <button> cho hành động: Nếu không điều hướng, <button type="button"> đúng ngữ nghĩa hơn <a>.
  4. Tránh javascript: protocol: Nó là legacy, không an toàn, khó debug.

Khi nào buộc dùng javascript:?

Hiếm khi. Có thể trong bookmarklet hoặc legacy system không thể sửa HTML. Luôn ưu tiên onclick hoặc event listener.