Maison > interface Web > tutoriel CSS > Comment puis-je désactiver efficacement les liens HTML dans différents navigateurs ?

Comment puis-je désactiver efficacement les liens HTML dans différents navigateurs ?

Mary-Kate Olsen
Libérer: 2024-12-27 15:01:10
original
227 Les gens l'ont consulté

How Can I Effectively Disable HTML Links Across Different Browsers?

Désactiver les liens HTML avec des solutions complètes

La désactivation des liens HTML peut poser des problèmes, en particulier si l'on considère la compatibilité entre les navigateurs comme Firefox et Chrome. Voici plusieurs approches pour désactiver efficacement les liens :

Méthode CSS :

Cette méthode est l'approche préférée et devrait être prise en charge par la plupart des navigateurs modernes :

a.disabled {
    pointer-events: none;
}
Copier après la connexion

Cependant, Internet Explorer 11 peut nécessiter l'utilisation de display: inline-block ou display: block pour liens.

Contrôle de la mise au point :

Pour empêcher les éléments d'être ciblés, utilisez tabindex="-1":

<a href="#" disabled tabindex="-1">...</a>
Copier après la connexion

Interception des clics :

Gérer les clics à l'aide de JavaScript et rechercher les personnes handicapées attribut :

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});
Copier après la connexion

Effacement du lien :

Supprimez l'attribut href, désactivant ainsi le lien :

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});
Copier après la connexion

Faux clic Gestionnaire :

Ajoutez une fonction onclick qui renvoie false pour empêcher le lien d'être suivi :

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});
Copier après la connexion

Style :

Appliquer des styles pour indiquer visuellement l'état désactivé :

a[disabled] {
    color: gray;
}
Copier après la connexion

Accessibilité ARIA :

À des fins d'accessibilité, incluez l'attribut aria-disabled="true" avec l'attribut désactivé état :

<a href="#" disabled aria-disabled="true">...</a>
Copier après la connexion

N'oubliez pas de prendre en compte la compatibilité entre navigateurs et de choisir soigneusement la méthode qui correspond le mieux à vos besoins spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Article précédent:Comment puis-je détecter la visibilité de la barre de défilement avec jQuery ? Article suivant:Pourquoi devriez-vous utiliser plutôt que