Wie können Sie HTML-Links in modernen Browsern deaktivieren?

HTML-Links deaktivieren

Hintergrund:

Das Deaktivieren von HTML-Links ist in bestimmten Szenarien erforderlich, beispielsweise wenn eine Schaltfläche dargestellt wird ein Link wird inaktiv. Obwohl diese Aufgabe im Internet Explorer unkompliziert ist, erweist sie sich in Browsern wie Firefox und Chrome als Herausforderung.

Ursache:

Dem HTML-Element fehlt ein natives „disabled“-Attribut , was es schwierig macht, Linkklicks programmgesteuert zu verhindern.

Lösungen:

1. CSS-Zeigerereignisse:

a.disabled {
  pointer-events: none;
}

Diese Methode deaktiviert Zeigerereignisse auf dem Link und verhindert so Klicks und Hover. Es wird jedoch möglicherweise nicht von älteren Browsern unterstützt.

2. Focus Tabindex:

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

Das Festlegen von tabindex="-1" verhindert, dass der Link den Fokus erhält, und deaktiviert ihn effektiv.

3. Klicks abfangen (JavaScript):

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

Diese Methode fängt Klickereignisse ab und verhindert, dass sie den Link erreichen, wenn er deaktiviert ist.

4. Link löschen (JavaScript):

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

Diese Methode löscht das href-Attribut des Links und verhindert so, dass ihm gefolgt wird.

5. Fake Click Handler (JavaScript):

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

Diese Methode fügt einen Click-Handler hinzu, der false zurückgibt und den Link effektiv deaktiviert.

Styling:

a[disabled] {
  color: gray;
}

Diese Regel formatiert deaktivierte Links entsprechend.

ARIA-Attribut:

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

Fügen Sie „Aria-Disabled“ für Barrierefreiheitszwecke ein und geben Sie an Link deaktiviert den Status zu unterstützenden Technologien.

Das obige ist der detaillierte Inhalt vonWie können Sie HTML-Links in modernen Browsern deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!