最新のブラウザで HTML リンクを無効にするにはどうすればよいですか?

HTML リンクの無効化

背景:

HTML リンクの無効化は、ボタンがリンクが非アクティブになります。 Internet Explorer では簡単ですが、このタスクは Firefox や Chrome などのブラウザでは困難であることがわかります。

原因:

HTML 要素にネイティブの「disabled」属性がありません。

解決策:

1. CSS pointer-events:

a.disabled {
  pointer-events: none;
}

このメソッドは、リンク上のポインター イベントを無効にし、クリックやホバーを防ぎます。ただし、古いブラウザではサポートされていない場合があります。

2.フォーカス Tabindex:

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

tabindex="-1" を設定すると、リンクがフォーカスを取得できなくなり、事実上無効になります。

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

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

このメソッドはクリック イベントをインターセプトし、無効になっている場合はリンクに到達するのを防ぎます。

4.リンクのクリア (JavaScript):

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

このメソッドは、リンクの href 属性をクリアして、リンクがたどられるのを防ぎます。

5.偽のクリック ハンドラー (JavaScript):

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

このメソッドは false を返すクリック ハンドラーを追加し、事実上リンクを無効にします。

スタイル:

a[disabled] {
  color: gray;
}

このルールは無効なリンクを適切にスタイル設定します。

ARIA 属性:

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

アクセシビリティ目的で「aria-disabled」を含めます。無効な状態を支援技術にリンクします。

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