QA@IT
«質問へ戻る

タイトルと質問内容を修正しました。

0
タイトル
IE8でaタグのclickイベントでaタグ自体をdisabledにするとhrefの設定が動作しない。
bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しない。
本文
 ## 概要
-IE8でaタグのclickイベントでaタグ自体をdisabledにするとhrefの設定が動作しません。
+bootstrap2.3.2においてaタグを使用したボタンで、Clickイベントでdisabledを設定するとhrefの設定が動作しません。
 言葉で説明すると複雑なので再現手順及びコードを記載しました。
 
-- bootstrap2.3.2、jQuery1.11.1を使用し、aタグのボタンを作成。
-- aタグのhrefでjavascriptが動作するように設定。
-- jQueryでaタグのClickイベントでaタグをdisabledにする。(2重押下対策)
+- bootstrap2.3.2を使用し、aタグのボタンを作成。
+- aタグのhrefに何らかの処理を設定。
+- jQueryでaタグのClickイベントでaタグをdisabledにする。(2重押下対策が目的)
 - ボタンをクリックする。
     - 通常はClickイベントが動作し、ボタンがdisabledになり、hrefの設定が動作する。
     - IE8の環境ではClickイベント後、ボタンがdisabledになった後、hrefの設定が動作しない。
 
 上記の場合、IE8の場合もボタンをdisabledにし、その後hrefに設定した挙動が行われるためにはどのようにすればよいでしょうか。
-ページ最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。
+質問最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。
 
 ## サンプル
 - jsbinというサイトで下記のコードを使用してサンプルを作成しました。
-    - http://jsbin.com/yevoyoqira/1/
+    - http://jsbin.com/vopoyujahu/1/
 
 ## コード
 - 下記のコードでボタンをクリックするとIE8以外ではon、Clickと出力されますが、IE8ではClickが出力されません。
 
 ```javascript
 function method() {
-  console.log("click");
+  alert("click");
 }
 
 $("#atag").on("click",function() {
-  console.log("on");
+  alert("on");
   $(this).attr('disabled', true);
 });
 
 
 ```javascript
 function method() {
-  console.log("click");
+  alert("click");
 }
 
 $("#atag").on("click",function() {
-  console.log("on");
+  alert("on");
   // IE8の場合hrefの設定が動作しないので、強制的に動作させる。
   var userAgent = window.navigator.userAgent.toLowerCase();
   var appVersion = window.navigator.appVersion.toLowerCase();
タグ

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

概要

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

上記の場合、IE8の場合もボタンをdisabledにし、その後hrefに設定した挙動が行われるためにはどのようにすればよいでしょうか。
質問最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。

サンプル

コード

  • 下記のコードでボタンをクリックするとIE8以外ではon、Clickと出力されますが、IE8ではClickが出力されません。
<!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:method()">CLICK ME</a>
  </body>
</html>

function method() {
  alert("click");
}

$("#atag").on("click",function() {
  alert("on");
  $(this).attr('disabled', true);
});

IE8で分岐して強制的に動作させる手順。

  • 分岐すれば動作はしましたがもう少しスマートな方法はありますでしょうか。
function method() {
  alert("click");
}

$("#atag").on("click",function() {
  alert("on");
  // IE8の場合hrefの設定が動作しないので、強制的に動作させる。
  var userAgent = window.navigator.userAgent.toLowerCase();
  var appVersion = window.navigator.appVersion.toLowerCase();
  if (userAgent.indexOf('msie') != -1 && appVersion.indexOf("msie 8.") != -1) {
      location.href = $(this).attr("href");
  }

  $(this).attr('disabled', true);
});

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

上記の場合、IE8の場合もボタンをdisabledにし、その後hrefに設定した挙動が行われるためにはどのようにすればよいでしょうか。
質問最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。

## サンプル
- jsbinというサイトで下記のコードを使用してサンプルを作成しました。
    - http://jsbin.com/vopoyujahu/1/

## コード
- 下記のコードでボタンをクリックするとIE8以外ではon、Clickと出力されますが、IE8では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:method()">CLICK ME</a>
  </body>
</html>

```

```javascript
function method() {
  alert("click");
}

$("#atag").on("click",function() {
  alert("on");
  $(this).attr('disabled', true);
});

```

## IE8で分岐して強制的に動作させる手順。
- 分岐すれば動作はしましたがもう少しスマートな方法はありますでしょうか。

```javascript
function method() {
  alert("click");
}

$("#atag").on("click",function() {
  alert("on");
  // IE8の場合hrefの設定が動作しないので、強制的に動作させる。
  var userAgent = window.navigator.userAgent.toLowerCase();
  var appVersion = window.navigator.appVersion.toLowerCase();
  if (userAgent.indexOf('msie') != -1 && appVersion.indexOf("msie 8.") != -1) {
      location.href = $(this).attr("href");
  }

  $(this).attr('disabled', true);
});

```

0
本文
 ページ最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。
 
 ## サンプル
-- jsbinというサイトで過去のコードでサンプルを作成しています。
+- jsbinというサイトで下記のコードを使用してサンプルを作成しました。
     - http://jsbin.com/yevoyoqira/1/
 
 ## コード

IE8でaタグのclickイベントでaタグ自体をdisabledにするとhrefの設定が動作しない。

概要

IE8でaタグのclickイベントでaタグ自体をdisabledにするとhrefの設定が動作しません。
言葉で説明すると複雑なので再現手順及びコードを記載しました。

  • bootstrap2.3.2、jQuery1.11.1を使用し、aタグのボタンを作成。
  • aタグのhrefでjavascriptが動作するように設定。
  • jQueryでaタグのClickイベントでaタグをdisabledにする。(2重押下対策)
  • ボタンをクリックする。
    • 通常はClickイベントが動作し、ボタンがdisabledになり、hrefの設定が動作する。
    • IE8の環境ではClickイベント後、ボタンがdisabledになった後、hrefの設定が動作しない。

上記の場合、IE8の場合もボタンをdisabledにし、その後hrefに設定した挙動が行われるためにはどのようにすればよいでしょうか。
ページ最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。

サンプル

コード

  • 下記のコードでボタンをクリックするとIE8以外ではon、Clickと出力されますが、IE8ではClickが出力されません。
<!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:method()">CLICK ME</a>
  </body>
</html>

function method() {
  console.log("click");
}

$("#atag").on("click",function() {
  console.log("on");
  $(this).attr('disabled', true);
});

IE8で分岐して強制的に動作させる手順。

  • 分岐すれば動作はしましたがもう少しスマートな方法はありますでしょうか。
function method() {
  console.log("click");
}

$("#atag").on("click",function() {
  console.log("on");
  // IE8の場合hrefの設定が動作しないので、強制的に動作させる。
  var userAgent = window.navigator.userAgent.toLowerCase();
  var appVersion = window.navigator.appVersion.toLowerCase();
  if (userAgent.indexOf('msie') != -1 && appVersion.indexOf("msie 8.") != -1) {
      location.href = $(this).attr("href");
  }

  $(this).attr('disabled', true);
});

## 概要
IE8でaタグのclickイベントでaタグ自体をdisabledにするとhrefの設定が動作しません。
言葉で説明すると複雑なので再現手順及びコードを記載しました。

- bootstrap2.3.2、jQuery1.11.1を使用し、aタグのボタンを作成。
- aタグのhrefでjavascriptが動作するように設定。
- jQueryでaタグのClickイベントでaタグをdisabledにする。(2重押下対策)
- ボタンをクリックする。
    - 通常はClickイベントが動作し、ボタンがdisabledになり、hrefの設定が動作する。
    - IE8の環境ではClickイベント後、ボタンがdisabledになった後、hrefの設定が動作しない。

上記の場合、IE8の場合もボタンをdisabledにし、その後hrefに設定した挙動が行われるためにはどのようにすればよいでしょうか。
ページ最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。

## サンプル
- jsbinというサイトで下記のコードを使用してサンプルを作成しました。
    - http://jsbin.com/yevoyoqira/1/

## コード
- 下記のコードでボタンをクリックするとIE8以外ではon、Clickと出力されますが、IE8では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:method()">CLICK ME</a>
  </body>
</html>

```

```javascript
function method() {
  console.log("click");
}

$("#atag").on("click",function() {
  console.log("on");
  $(this).attr('disabled', true);
});

```

## IE8で分岐して強制的に動作させる手順。
- 分岐すれば動作はしましたがもう少しスマートな方法はありますでしょうか。

```javascript
function method() {
  console.log("click");
}

$("#atag").on("click",function() {
  console.log("on");
  // IE8の場合hrefの設定が動作しないので、強制的に動作させる。
  var userAgent = window.navigator.userAgent.toLowerCase();
  var appVersion = window.navigator.appVersion.toLowerCase();
  if (userAgent.indexOf('msie') != -1 && appVersion.indexOf("msie 8.") != -1) {
      location.href = $(this).attr("href");
  }

  $(this).attr('disabled', true);
});

```

質問を投稿

IE8でaタグのclickイベントでaタグ自体をdisabledにするとhrefの設定が動作しない。

概要

IE8でaタグのclickイベントでaタグ自体をdisabledにするとhrefの設定が動作しません。
言葉で説明すると複雑なので再現手順及びコードを記載しました。

  • bootstrap2.3.2、jQuery1.11.1を使用し、aタグのボタンを作成。
  • aタグのhrefでjavascriptが動作するように設定。
  • jQueryでaタグのClickイベントでaタグをdisabledにする。(2重押下対策)
  • ボタンをクリックする。
    • 通常はClickイベントが動作し、ボタンがdisabledになり、hrefの設定が動作する。
    • IE8の環境ではClickイベント後、ボタンがdisabledになった後、hrefの設定が動作しない。

上記の場合、IE8の場合もボタンをdisabledにし、その後hrefに設定した挙動が行われるためにはどのようにすればよいでしょうか。
ページ最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。

サンプル

コード

  • 下記のコードでボタンをクリックするとIE8以外ではon、Clickと出力されますが、IE8ではClickが出力されません。
<!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:method()">CLICK ME</a>
  </body>
</html>

function method() {
  console.log("click");
}

$("#atag").on("click",function() {
  console.log("on");
  $(this).attr('disabled', true);
});

IE8で分岐して強制的に動作させる手順。

  • 分岐すれば動作はしましたがもう少しスマートな方法はありますでしょうか。
function method() {
  console.log("click");
}

$("#atag").on("click",function() {
  console.log("on");
  // IE8の場合hrefの設定が動作しないので、強制的に動作させる。
  var userAgent = window.navigator.userAgent.toLowerCase();
  var appVersion = window.navigator.appVersion.toLowerCase();
  if (userAgent.indexOf('msie') != -1 && appVersion.indexOf("msie 8.") != -1) {
      location.href = $(this).attr("href");
  }

  $(this).attr('disabled', true);
});

## 概要
IE8でaタグのclickイベントでaタグ自体をdisabledにするとhrefの設定が動作しません。
言葉で説明すると複雑なので再現手順及びコードを記載しました。

- bootstrap2.3.2、jQuery1.11.1を使用し、aタグのボタンを作成。
- aタグのhrefでjavascriptが動作するように設定。
- jQueryでaタグのClickイベントでaタグをdisabledにする。(2重押下対策)
- ボタンをクリックする。
    - 通常はClickイベントが動作し、ボタンがdisabledになり、hrefの設定が動作する。
    - IE8の環境ではClickイベント後、ボタンがdisabledになった後、hrefの設定が動作しない。

上記の場合、IE8の場合もボタンをdisabledにし、その後hrefに設定した挙動が行われるためにはどのようにすればよいでしょうか。
ページ最下部に記載致しましたが、IE8を判別して強制的に飛ばすという手段は考えつきましたが、スマートな手段がありましたら教えてください。

## サンプル
- jsbinというサイトで過去のコードでサンプルを作成しています。
    - http://jsbin.com/yevoyoqira/1/

## コード
- 下記のコードでボタンをクリックするとIE8以外ではon、Clickと出力されますが、IE8では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:method()">CLICK ME</a>
  </body>
</html>

```

```javascript
function method() {
  console.log("click");
}

$("#atag").on("click",function() {
  console.log("on");
  $(this).attr('disabled', true);
});

```

## IE8で分岐して強制的に動作させる手順。
- 分岐すれば動作はしましたがもう少しスマートな方法はありますでしょうか。

```javascript
function method() {
  console.log("click");
}

$("#atag").on("click",function() {
  console.log("on");
  // IE8の場合hrefの設定が動作しないので、強制的に動作させる。
  var userAgent = window.navigator.userAgent.toLowerCase();
  var appVersion = window.navigator.appVersion.toLowerCase();
  if (userAgent.indexOf('msie') != -1 && appVersion.indexOf("msie 8.") != -1) {
      location.href = $(this).attr("href");
  }

  $(this).attr('disabled', true);
});

```