Comment puis-je désactiver efficacement les liens HTML ?

Désactivation des liens HTML

Les liens peuvent être désactivés de différentes manières, chacune avec ses propres avantages et inconvénients.

1. Méthode CSS (recommandée)

a.disabled {
    pointer-events: none;
}

Cette méthode est l'option préférée car elle fournit une solution portable. Cependant, les navigateurs plus anciens comme Internet Explorer ne prennent pas entièrement en charge les événements de pointeur. Pour contourner ce problème, pensez à utiliser l'attribut désactivé :

a[disabled] {
    pointer-events: none;
}

2. Focus Intercept

Vous pouvez utiliser tabindex pour empêcher les liens d'être ciblés, les rendant ainsi inaccessibles via le clavier :

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

Notez que cette méthode n'empêche pas les événements de clic.

3. Intercepter les clics (JavaScript)

Utilisez un écouteur d'événements JavaScript pour intercepter les clics sur les liens et rechercher l'indicateur désactivé :

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

4. Effacez le lien

Supprimez l'attribut href pour rendre le lien non fonctionnel :

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

5. Faux gestionnaire de clics

Ajoutez un gestionnaire de clics qui renvoie false pour désactiver le lien :

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

Style des liens désactivés

Utilisez le attribut ou classe désactivé pour styliser les liens désactivés :

a[disabled] {
    color: gray;
}

ARIA Support

Incluez aria-disabled="true" ainsi que l'attribut/classe désactivé pour garantir l'accessibilité aux lecteurs d'écran.

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!