Tweet

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

しかし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アプリケーション開発者としては早くサポート対象外になってほしいものである。

Tweet