Bagaimana Anda Boleh Lumpuhkan Pautan HTML dalam Pelayar Moden?

Melumpuhkan Pautan HTML

Latar Belakang:

Melumpuhkan pautan HTML diperlukan dalam senario tertentu, seperti apabila butang mewakili pautan menjadi tidak aktif. Walaupun mudah dalam Internet Explorer, tugas ini terbukti mencabar dalam pelayar seperti Firefox dan Chrome.

Punca:

Elemen HTML tidak mempunyai atribut "dilumpuhkan" asli , menjadikannya sukar untuk menghalang klik pautan secara pengaturcaraan.

Penyelesaian:

1. Peristiwa penuding CSS:

a.disabled {
  pointer-events: none;
}

Kaedah ini melumpuhkan acara penuding pada pautan, menghalang klik dan tuding. Walau bagaimanapun, ia mungkin tidak disokong oleh pelayar lama.

2. Focus Tabindex:

<a href="#" disabled tabindex="-1">...</a>

Menetapkan tabindex="-1" menghalang pautan daripada mendapat fokus, melumpuhkannya dengan berkesan.

3. Klik Pintasan (JavaScript):

$("td > a").on("click", function(event) {
  if ($(this).is("[disabled]")) {
    event.preventDefault();
  }
});

Kaedah ini memintas acara klik dan menghalangnya daripada mencapai pautan jika ia dilumpuhkan.

4. Kosongkan Pautan (JavaScript):

$("td > a").each(function() {
  this.data("href", this.attr("href"))
      .attr("href", "javascript:void(0)")
      .attr("disabled", "disabled");
});

Kaedah ini mengosongkan atribut href pautan, menghalangnya daripada diikuti.

5. Pengendali Klik Palsu (JavaScript):

$("td > a").attr("disabled", "disabled").on("click", function() {
  return false; 
});

Kaedah ini menambahkan pengendali klik yang mengembalikan palsu, melumpuhkan pautan dengan berkesan.

Penggayaan:

a[disabled] {
  color: gray;
}

Peraturan ini menggayakan pautan yang dilumpuhkan dengan sewajarnya.

Atribut ARIA:

<a href="#" disabled aria-disabled="true">...</a>

Sertakan "aria-disabled" untuk tujuan kebolehaksesan, menunjukkan keadaan pautan yang dilumpuhkan kepada teknologi bantuan.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Lumpuhkan Pautan HTML dalam Pelayar Moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!