27二月/120
超連結 onclick 事件茶包日記
前言
之前在做某案子的時候,發生了一點靈異事件,就是超連結有設定網址以及 onclick 事件,而在事件裡面有些邏輯去判斷是否會執行連結動作,但是不知道為啥事件判斷的邏輯怎麼看都很正確,但是就是還是會去執行超連結的動作,花了點時間才發現問題所在,是有點容易疏忽的情形,特此記錄。
說明
直接簡化問題,就不寫多一點邏輯判斷了,先看看下面的 HTML:
1 2 3 4 5 6 |
<a href="/Home/About/" onclick="Test();">點我</a> <script> function Test() { return false; } </script> |
上面的程式碼看似正常,return false; 應該會讓超連結不會執行,但是事實上超連結怎樣都會執行。必須要在 Test(); 前面加上 return 才會真正去停止超連結的事件。
1 2 3 4 5 6 |
<a href="/Home/About/" onclick="return Test();">點我</a> <script> function Test() { return false; } </script> |
此外也可以再函數裡面加上 event.preventDefault(); 來取消原本事件的行為,來達到停止事件的作用。不過這一個方法在 IE 就不支援了...Orz
可以參閱參考資料,有針對 IE 的處理,但是還是建議使用對超連結綁訂事件的方式來處理事件,不要使用 inline 的方式可能比較不會疏忽或是有點問題了。
1 2 3 4 5 6 |
<a href="/Home/About/" onclick="Test();">點我</a> <script> function Test() { event.preventDefault(); } </script> |
結論
魔鬼總是藏在細節裡面,有時候一點小疏忽卻會導致整個程式的結果都不一樣,特此記錄一下,避免未來又疏忽掉了。
參考資料
event.preventDefault() function not working in IE. Any help?
Leave a comment