[zz]javascript:void(0) 造成 location.href 失效

http://evenrain.com/archives/162

javascript:void(0) 造成 location.href 失效

Posted on 二月 7, 2009

在寫 AJAX 的時候很常使用到類似下面的語法，好處是連結的樣式還會存在，但是不會導向任何地方，改為執行 onclick 事件中的 function。

PLAIN TEXT

HTML:

1. <a onclick="ajax_function()" href="javascript:void(0)">點我</a>

前陣子同事想要在使用者點擊連結時，呼叫 javascript 的 function 做一些判斷，然後依照判斷的結果導向不同的頁面。他是寫成下面那樣，不過卻有使用者反應沒有作用。

PLAIN TEXT

HTML:

1. <script><!--
2. function check(islogin) {
3.   if (islogin) location.href="result.html";
4.   else location.href="login.html";
5. }
6. // --></script>
7. <a onclick="check(islogin)" href="javascript:void(0)">點我</a>

後來研判是 javascript:void(0) 造成，如果改成底下這樣就可以正常運行。

PLAIN TEXT

HTML:

1. <a onclick="check(islogin)" href="#">點我</a>

這樣做的缺點是，使用者點擊連結後整個頁面會先往上跳，才將頁面導向結果頁，說真的還滿奇怪的。今天拜訪了 Google 大神，他跟我報了這個網頁。原來如果用 javascript:void(0) 會使得需要整頁 refresh 的功能失效，例如：location.href 以及 window.reload。所以如果要使用這兩種功能，又不希望用"#"造成網頁往上跳，寫成底下那樣就可以了一兼二顧了。

PLAIN TEXT

HTML:

1. <a onclick="check(islogin);return false;" href="#">點我</a>