2010年11月2日 星期二

Javascript href onclick

在超連結(anchor)上,要寫click事件有兩種寫法:

  1. <a href="#" onclick="foo()">onclick</a>
  2. <a href="javascript:foo()">href</a>

在大陸的網站上 ref. 1 看到,IE4無法使用onclick。於是,他辛苦地寫了一段script讓onclick可以在IE4上執行。還好在現在這個時代,沒什麼人用IE4了,IE4管他去死吧! 那麼這兩種寫法還有什麼不同呢?

我google了一下,中文的網頁並不多,只好看英文的。剛好有一篇 ref. 2 就在講這個,但是看完了還是霧煞煞。在我實驗後發現,當function有傳入this參數時,在function中所得到的object是不同的。onclick="foo(this)"傳入的this參數是HTMLAnchorElement,而javascript:foo(this) 傳入的參數是window。再看到ref 2中,才明白他的意思。@@

另外,在找資料的過程中看到,在anchor的onclick event中回傳false,可以讓href不執行。如果href="#",則會執行完function後,將網頁導到自己,因此焦點 (focus) 也會跟著改變。換句話說,若不想網頁重導 (改變焦點),單純只要執行function話,回傳值設為false,就OK了。