Bagaimanakah Saya Boleh Melumpuhkan Pautan HTML Merentasi Pelayar Berbeza dengan Berkesan?

Lumpuhkan Pautan HTML dengan Penyelesaian Komprehensif

Melumpuhkan pautan HTML boleh menimbulkan cabaran, terutamanya apabila mempertimbangkan keserasian merentas penyemak imbas seperti Firefox dan Chrome. Berikut ialah beberapa pendekatan untuk melumpuhkan pautan dengan berkesan:

Kaedah CSS:

Kaedah ini ialah pendekatan pilihan dan harus disokong oleh kebanyakan pelayar moden:

a.disabled {
    pointer-events: none;
}

Walau bagaimanapun, Internet Explorer 11 mungkin memerlukan penggunaan paparan: blok sebaris atau paparan: blok untuk pautan.

Kawalan Fokus:

Untuk mengelakkan elemen daripada difokus, gunakan tabindex="-1":

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

Pemintas Klik:

Kendalikan klik menggunakan JavaScript dan semak untuk orang kurang upaya atribut:

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

Pembersihan Pautan:

Alih keluar atribut href, melumpuhkan pautan dengan berkesan:

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

Klik Palsu Pengendali:

Tambah fungsi onclick yang mengembalikan palsu untuk menghalang pautan daripada menjadi diikuti:

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

Penggayaan:

Gunakan gaya untuk menunjukkan keadaan orang kurang upaya secara visual:

a[disabled] {
    color: gray;
}

Kebolehcapaian ARIA:

Untuk tujuan kebolehaksesan, sertakan atribut aria-disabled="true" bersama dengan keadaan kurang upaya:

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

Ingat untuk mempertimbangkan keserasian merentas penyemak imbas dan berhati-hati memilih kaedah yang paling sesuai dengan keperluan khusus anda.

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