HTML リンクを効果的に無効にするにはどうすればよいですか?

HTML リンクの無効化

リンクはさまざまな方法で無効にすることができますが、それぞれに独自の長所と短所があります。

1. CSS メソッド (推奨)

a.disabled {
    pointer-events: none;
}

このメソッドは移植可能なソリューションを提供するため、推奨されるオプションです。ただし、Internet Explorer などの古いブラウザは、ポインタ イベントを完全にはサポートしていません。これを回避するには、disabled 属性の使用を検討してください:

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

2。フォーカス インターセプト

tabindex を使用すると、リンクがフォーカスされ、キーボードからアクセスできなくなるのを防ぐことができます。

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

このメソッドはクリック イベントを妨げないことに注意してください。

3.クリックのインターセプト (JavaScript)

JavaScript イベント リスナーを使用してリンクのクリックをインターセプトし、無効なフラグを確認します:

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

4.リンクをクリアします

href 属性を削除して、リンクを機能しないようにします:

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

5.偽のクリック ハンドラー

リンクを無効にするために false を返すクリック ハンドラーを追加します。

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

無効なリンクのスタイル設定

無効な属性またはクラスをスタイルに無効にするリンク:

a[disabled] {
    color: gray;
}

ARIA サポート

スクリーン リーダーのアクセシビリティを確保するには、aria-disabled="true" を無効な属性/クラスとともに含めます。

以上がHTML リンクを効果的に無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。