Comment désactiver les liens HTML dans les navigateurs modernes ?

Désactivation des liens HTML

Contexte :

La désactivation des liens HTML est nécessaire dans certains scénarios, par exemple lorsqu'un bouton représentant un lien devient inactif. Bien que simple dans Internet Explorer, cette tâche s'avère difficile dans les navigateurs comme Firefox et Chrome.

Cause :

L'élément HTML ne dispose pas d'un attribut natif "désactivé" , ce qui rend difficile la prévention des clics sur les liens par programmation.

Solutions :

1. Événements de pointeur CSS :

a.disabled {
  pointer-events: none;
}

Cette méthode désactive les événements de pointeur sur le lien, empêchant ainsi les clics et les survols. Cependant, il se peut qu'il ne soit pas pris en charge par les anciens navigateurs.

2. Focus Tabindex :

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

Le paramètre tabindex="-1" empêche le lien d'obtenir le focus, le désactivant ainsi efficacement.

3. Intercepter les clics (JavaScript) :

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

Cette méthode intercepte les événements de clic et les empêche d'atteindre le lien s'il est désactivé.

4. Effacer le lien (JavaScript) :

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

Cette méthode efface l'attribut href du lien, l'empêchant d'être suivi.

5. Faux gestionnaire de clics (JavaScript) :

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

Cette méthode ajoute un gestionnaire de clics qui renvoie false, désactivant ainsi le lien.

Style :

a[disabled] {
  color: gray;
}

Cette règle stylise les liens désactivés de manière appropriée.

Attribut ARIA :

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

Incluez "aria-disabled" à des fins d'accessibilité, en indiquant le l'état désactivé du lien vers les technologies d'assistance.

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!