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