JavaScript
HTML5
a
CrossBrowser
anchor

aタグにdisabled属性を与えた際のIEとChromeで挙動の差

aタグにdisbled属性

多くの場合、ブラウザ上でボタンを表示する時はbuttonタグを使用すると思う。
buttonの形にとらわれずにcssにより自由なデザインでボタンを配置したい場合、aタグをデフォルトの挙動を排除した状態にしてクリックイベントにやりたい挙動を実装することがあると思う。
このようにして作成したaタグのボタンを非活性とするためdisabled属性を設定した際に、IEとChromede挙動が異なることに気付いたためメモ。

実行環境

  • OS:Windows(7、10)
  • ブラウザ:IE(10、11)、Chrome
  • その他:HTML5、CSS3、Jersey(サーバ側フレームワーク Strutsベース)

IEの挙動

狙った通りの挙動。
クリックしてもクリックイベントにしかけた処理は呼び出されない。
見た目は変わらないため、disabled属性が存在する場合のスタイルを定義する必要がある。

Chromeの挙動

クリックするとクリックイベントにしかけた処理が呼び出されてしまう。
IE同様見た目は変わらないため、disabled属性が存在する場合のスタイルを定義する必要がある。

aタグにdisabled属性はない!

調べたところ、aタグにはdisabled属性はないとのこと。。。
参照:https://developer.mozilla.org/ja/docs/Web/HTML/Element/a

IEでdisabled属性が効いているのは、IEが独自路線を突っ走っているからと思われる。。。

aタグを非活性にするには

そんなわけで、非活性にするのは多くのブラウザでタグの指定では実現できないため、javascriptで動的に非活性としてあげる必要がある。
(クロスブラウザ対応が不要で対応ブラウザがIEのみの場合は問題ないかもだが、いつ独自実装を変更するか分からないのでIEのみ対応でもjavascriptを使って実装するのが無難と思われる。。)