Wie kann ich HTML-Links effektiv deaktivieren?

HTML-Links deaktivieren

Links können auf verschiedene Arten deaktiviert werden, jede mit ihren eigenen Vor- und Nachteilen.

1. CSS-Methode (empfohlen)

a.disabled {
    pointer-events: none;
}

Diese Methode ist die bevorzugte Option, da sie eine tragbare Lösung bietet. Allerdings unterstützen ältere Browser wie Internet Explorer Zeigerereignisse nicht vollständig. Um dies zu umgehen, sollten Sie das Attribut „disabled“ verwenden:

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

2. Focus Intercept

Sie können Tabindex verwenden, um zu verhindern, dass Links fokussiert werden, sodass sie über die Tastatur nicht erreichbar sind:

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

Beachten Sie, dass diese Methode keine Klickereignisse verhindert.

3. Klicks abfangen (JavaScript)

Verwenden Sie einen JavaScript-Ereignis-Listener, um Linkklicks abzufangen und auf die Deaktivierungsflagge zu prüfen:

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

4. Löschen Sie den Link

Entfernen Sie das href-Attribut, um den Link funktionsunfähig zu machen:

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

5. Fake Click Handler

Fügen Sie einen Click-Handler hinzu, der „false“ zurückgibt, um den Link zu deaktivieren:

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

Deaktivierte Links formatieren

Verwenden Sie die deaktiviertes Attribut oder Klasse zum Stylen deaktivierter Links:

a[disabled] {
    color: gray;
}

ARIA Unterstützung

Fügen Sie aria-disabled="true" zusammen mit dem Attribut/der Klasse „disabled“ ein, um die Barrierefreiheit für Bildschirmleseprogramme sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie kann ich HTML-Links effektiv deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!