山pの楽しいお勉強生活

勉強の成果を垂れ流していきます

bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。

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の設定が動作しない。

サンプル

JS Bin

IEhttp://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。

サンプル

JS Bin

コード

  • 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。)