Dưới đây là 2 cách để vô hiệu hóa liên kết/phần tử neo liên quan đến <a> HTML bằng cách sử dụng CSS hoặc bằng cách sử dụng JavaScript nội tuyến
Mục lụcTắt neo HTML bằng CSS pointer-events: none
Để tắt phần tử neo HTML bằng CSS, chúng ta có thể áp dụng kiểu pointer-events: none
pointer-events: none sẽ vô hiệu hóa tất cả các sự kiện nhấp chuột trên phần tử neo
Ví dụ
<a href="//google.com" style="pointer-events: none">Google.com</a>
Có thể đặt <style> .disabled-link { pointer-events: none; } </style> <a href="//google.com" class="disabled-link">Google.com</a> 1 bằng cách sử dụng các thuộc tính và bộ chọn CSS
<style> .disabled-link { pointer-events: none; } </style> <a href="//google.com" class="disabled-link">Google.com</a>
Đây là một lựa chọn tuyệt vời khi bạn chỉ có quyền truy cập vào các thuộc tính <style> .disabled-link { pointer-events: none; } </style> <a href="//google.com" class="disabled-link">Google.com</a> 2 hoặc <style> .disabled-link { pointer-events: none; } </style> <a href="//google.com" class="disabled-link">Google.com</a> 3. Nó thậm chí có thể được sử dụng để vô hiệu hóa tất cả các liên kết HTML trên một trang
<style> /* not recommended */ a { pointer-events: none; } </style> <a href="//google.com">Google.com</a>
Bây giờ chúng ta đã biết cách vô hiệu hóa phần tử neo/liên kết HTML (thẻ _______1_______4) bằng cách sử dụng pointer-events: none, có thể được thực hiện mà không cần chạm vào thuộc tính <style> .disabled-link { pointer-events: none; } </style> <a href="//google.com" class="disabled-link">Google.com</a> 6 hiện có bằng cách sử dụng các kiểu
Tiếp theo, chúng ta sẽ xem cách vô hiệu hóa phần tử neo/liên kết HTML bằng cách sử dụng JavaScript nội tuyến bên trong thuộc tính <style> .disabled-link { pointer-events: none; } </style> <a href="//google.com" class="disabled-link">Google.com</a> 6