QA@ITに投稿したのですが、一応blogにも記載。
概要
bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。 言葉で説明すると複雑なので再現手順及びコードを記載しました。
- bootstrap2.3.2を使用し、aタグのボタンを作成。
- aタグのhrefに何らかの処理を設定。
- jQueryでaタグのClickイベントでaタグをdisabledにする。(2重処理対策)
- ボタンをクリックする。
- 通常はClickイベントが動作し、ボタンがdisabledになり、hrefの設定が動作する。
- IE8の環境ではClickイベント後、ボタンがdisabledになった後、hrefの設定が動作しない。
サンプル
IEでhttp://jsbin.com/duxiki/1/を開いてボタンをクリックすると、IE9以上では「click」、「href」というアラートがそれぞれ1回ずつ表示されますが、IE8(ドキュメントモードで8にしても再現可能。)では「click」のアラートしか表示されません。 -
コード
↑のコードと同じです。IE9以上では「click」、「href」というアラートがそれぞれ1回ずつ表示されますが、IE8(ドキュメントモードで8にしても再現可能。)では「click」のアラートしか表示されません。
html
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <a id="atag" class="btn" href="javascript:alert('href')">CLICK ME</a> </body> </html>
$("#atag").on("click",function(){ alert("click"); $(this).attr('disabled', true); });
解決方法
問題点
- aタグにdisabled属性は存在しないため、bootstrapがそれっぽく動作するようにしてくれているが、IE8の場合は対応しきれていないというのが問題か?
- bootstrapの挙動からみる予想としては。。。bootstrap内でaタグのボタンのクリックイベントで、クリックイベント発生時にdisabledが設定されている場合、return falseを返す的な処理がclickイベントで行われているのでしょうが、 IE8についてはボタンクリック時ではなく、その時点でのdisabled属性を見てしまっているのではないか。(コードは見ていません。。。)
対処方法
- disabled属性を付与するのではなくあくまでもaタグとして、2重処理を防ぐ。
- つまり、Clickイベント内で2度目の処理だった場合にはfalseを返せばOK。
サンプル
コード
- html
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <a id="atag" class="btn" href="javascript:alert('href')">CLICK ME</a> </body> </html>
$("#atag").on("click",function(){ if(!$(this).hasClass('disabled')) { alert("click"); $(this).addClass("disabled"); } else { return false; } });
まとめ
- bootstrapを使うとaタグもいい感じにボタンっぽくしてくれるけど、あくまでもaはaとして扱う必要がある。
- bootstrapも万能ではない。
- 細かく分析して問題点を把握する。(最初はjQueryも疑っていた)
- IE8はクソ。(サポートが切れるのは2016/1/12。)