異なるブラウザ間で HTML のハイパーリンクを効果的に無効にするにはどうすればよいですか?

HTML でのハイパーリンクの無効化

問題:
表のセル内のリンク ボタン () を無効にすると機能します。 Internet Explorer では使用できますが、Firefox や Chrome では使用できないのが一般的です。チャレンジ。

原因:
アンカー タグ () を直接無効にすることは、標準的な方法ではサポートされていません。

解決策:

CSS メソッド

の使用CSS を使用すると、リンクのポインター イベントを無効にすることができます:

a.disabled {
    pointer-events: none;
}

長所: これは、優れたクロスブラウザー サポートを備えた推奨される方法です。

短所: キーボード ナビゲーションではなく、ポインターの操作のみを無効にします。

フォーカスメソッド

負の tabindex を設定して、リンクがフォーカスを取得しないようにします:

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

長所: キーボード ナビゲーションとポインターの操作を無効にします。
短所: 複数のブラウザとの互換性をテストする必要があります。

インターセプトクリック イベント

無効ステータスをチェックし、デフォルトのアクションを防止するクリック ハンドラーをバインドします:

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

長所: さまざまなイベント ハンドラーを備えたほとんどのブラウザで動作します。
短所: JavaScript が必要で、リンクの動作がさらに変更されます

リンク属性をクリア

リンクから href 属性を削除します:

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

長所: リンクの属性を変更する、より直接的な解決策
短所: のすべてのメソッドと互換性がない可能性があります。

偽のクリック ハンドラー

常に false を返すクリック ハンドラーを追加します:

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

長所: 機能は前のものと似ています。
短所: 一部のメソッドではメモリ リークやその他の問題が発生する可能性があります。

スタイル

無効なリンクを視覚的に示す CSS スタイルを追加します:

a[disabled] {
    color: gray;
}

ARIA アクセシビリティ

aria-disabled="true" を含めますアクセシビリティの属性:

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

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