“javascript:void(0);”をhrefに指定したときにハマる

element.href = "javascript:void(0);";

とか

<a href="javascript:void(0);" />

を指定した際に、IE6で意図しない挙動になったという話。

こんなHTMLを書いて

<img id="image" src="./test.gif"/>
<a id="switch_error" href="javascript:void(0);">SWITCH_ERROR</a>
<a id="switch_success" href="javascript:void(0);">SWITCH_SUCCESS</a>

javascript側でこんなのを設定する

document.getElementById("switch_error").onclick = function(){
document.getElementById("image").src = "./test2.gif";
};
document.getElementById("switch_success").onclick = function(){
document.getElementById("image").src = "./test2.gif";
return false;
};

リンクを押下すると、test.gif が test2.gif に変わるという意図のコードである。

特になんでもないコードだと思いきや
IE6の場合は、SWITCH_ERRORのリンクを押下した場合に、
画像部分が空白になる。

そこで、SWITCH_SUCCESS リンクのonclickように、
return false を入れると意図通りに動作するようになる。

XP-FireFox1.5では、両方とも動作した。

これは・・・IEが悪いってよりは
そもそも、hrefにjavascript:void(0); を入れて制御すること自体が
気持ちよくない仕様に見えるんですけど、やり方がわからないス。

まぁいいや、動いたし。

30分ハマり

参考リンク

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