JavaScriptで画像を切り替える際に、あるコードだとIE6で動かなくなる

IEでのJavaScriptの動作確認は悪夢を見ること多々ですが、また謎仕様に遭遇。かなり長時間はまりました。。

動作例

先日作ったCAPTCHAを人間が見ても読めなかったときに画像を新しく生成し直す仕組みを考えていました。単純に、リンクをクリックするとJavaScriptが呼び出され、img要素のsrcを書き換える、という仕組み。上の動作例では?以降の引数にどんどん「a」を加えていく実装になっています。なおこのCAPTCHAはリロードすれば同じファイル名でも再生成されます。

hrefにはjavascript:void(0)を指定してonClickの方にコードを書く癖がついているので、今回もそれでやってFirefoxでは問題なく動いていたのですがIE6でなぜか動かず。onClickの中は実行されていますが、srcを書き換えても画像ファイルへのリクエストがなされません。ですので、画像の部分が空白になってしまいます。

キャッシュ等の問題を真っ先に疑いましたが、最終的にはhrefにvoid(0)を指定してonClickでJavaScriptを実行する組み合わせがよくないらしく、hrefで実行させたり、hrefの指定を#にしたりすれば動くようになりました。

原因がわかれば、Googleにどう聞けばいいかわかるのであっさり同じ問題の解決策が見つかりました。
ここで解説されているreturn false;をonClickに書き加える方がスマートですね。

Proxyとか :: javascript:void(0); で gifアニメ が動かないバク

僕が使った検索語の屍。もっと「バグ」方面で探した方が良かったかも。

javascript　IE 画像の表示
javascript　IE 画像　切り替え
javascript　IE 画像　再読み込み
javascript　img src reload