javascript:void(0) のIE6での注意点


js_void0_ie6

テキストや画像がクリックできることをユーザさんにわかるようにする為、aタグで挟むことが多々ある。aタグを使うとマウスオーバのときにマウスカーソルが矢印から手に変わり、ユーザさんがクリックできる箇所であることがわかりやすくなる。

js_void0_je6_02

しかしaタグはリンク先に遷移させるタグであり、場合によっては遷移ではなくjavascript処理をしたいこともある。
そこで、よく利用する手としてあるのが、下記のようにaタグとonclickイベントハンドラの組み合わせである。

//テキストボタン
<a href="javascript:void(0)" onclick="javascript関数()">○○○○</a>

//画像ボタン
<a href="javascript:void(0)">
    <img src="image/○○○.jpg" onclick="javascript関数()">
</a>

aタグのhref属性に何か値が入っているとonclick後にhrefが実行されるらしい。なのでhrefに「#」を入れてしまうと画面の一番上まで移動してしまう。空にしとくと再読み込みしてしまった。そこでhrefには

javascript:void(0)

と記述する。hrefを無効にする「おまじない」みたいなものだ。主なブラウザではエラーにならないので頻繁に使われている書き方である。
しかしIE6だけは動作がおかしくなることがある。いろいろ調べた結果IE6だけは記述にもう1つルールが必要になる。

onclick="javascript関数();return false;"

onclickでの最後の処理として、「return false」と記述する。これでIE6でも正常に動作するようになった。IE7、IE8、firefox、Google Chrome は記述しなくても動作できたのでIE6のみの現象である。
2010/09/10時点でも日本でのIE6のシェア率は10%あるのでまだ無視できないブラウザである。
IE6はいろいろ問題のあるブラウザなので、webアプリケーション開発者としては早くサポート対象外になってほしいものである。


[javascript:void(0) 関連記事]

「javascript:void(0) のIE6での注意点」への3件のフィードバック

  1. 正直言いますが、公共施設等のPCが変わらない限り、IE6はなくならないかと…
    制限ユーザー+IE、Explorer以外起動拒否にレジストリ弄ってるところが多いので、Chrome等他のブラウザもインストールできない場合も多いです。
    管理者権限のパスは施設長も知らない(業者が勝手に設定したため)ことも多いので。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です