Bagaimanakah Saya Boleh Melumpuhkan Hiperpautan dengan Berkesan dalam HTML Merentasi Pelayar Berbeza?

Melumpuhkan Hiperpautan dalam HTML

Masalah:
Melumpuhkan butang pautan dalam sel jadual (

), yang berfungsi dalam Internet Explorer tetapi tidak dalam Firefox atau Chrome, adalah perkara biasa cabaran.

Punca:
Melumpuhkan teg sauh secara langsung () tidak disokong dalam cara standard.

Penyelesaian:

Kaedah CSS

Menggunakan CSS, anda boleh melumpuhkan acara penunjuk untuk pautan:

a.disabled {
    pointer-events: none;
}

Kebaikan: Ini ialah kaedah pilihan dengan sokongan silang penyemak imbas yang baik.

Keburukan: Hanya melumpuhkan interaksi penunjuk, bukan navigasi papan kekunci.

Fokus Kaedah

Halang pautan daripada mendapat fokus dengan menetapkan indeks tab negatif:

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

Kebaikan: Melumpuhkan navigasi papan kekunci serta interaksi penunjuk.
Keburukan: Keserasian dengan berbilang penyemak imbas sepatutnya diuji.

Peristiwa Klik Pintasan

Ikat pengendali klik yang menyemak status orang kurang upaya dan menghalang tindakan lalai:

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

Kebaikan: Berfungsi dalam kebanyakan penyemak imbas dengan pelbagai pengendali acara.
Keburukan: Memerlukan JavaScript dan mengubah tingkah laku pautan dengan lebih ketara.

Kosongkan Atribut Pautan

Alih keluar atribut href daripada pautan:

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

Kebaikan: A penyelesaian yang lebih langsung yang mengubah kefungsian pautan.
Keburukan: Mungkin tidak serasi dengan semua kaedah menavigasi pautan.

Pengendali Klik Palsu

Tambah pengendali klik yang sentiasa mengembalikan palsu:

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

Kebaikan: Serupa dalam kefungsian kepada kaedah sebelumnya.
Keburukan: Boleh memperkenalkan kebocoran memori atau isu lain dalam sesetengah penyemak imbas.

Penggayaan

Tambahkan gaya CSS untuk menunjukkan pautan yang dilumpuhkan secara visual:

a[disabled] {
    color: gray;
}

Kebolehcapaian ARIA

Sertakan aria- atribut disabled="true" untuk kebolehaksesan:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melumpuhkan Hiperpautan dengan Berkesan dalam HTML Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!