a標籤的href和onclick屬性同時存在點選事件先觸發
- onclick的事件被先執行,其次是href中定義的(頁面跳轉或者javascript)
- 同時存在兩個定義的時候(onclick與href都定義了),如果想阻止href的動作,在onclick必須加上return false; 一般是這樣寫onclick="xxx();return false;".
- 在href中定義的函式如果有返回值的話,當前頁面的內容將被返回值代替
- 如果頁面過長有滾動條,且希望通過連結的 onclick 事件執行操作。應將它的 href 屬性設為 javascript:void(0);,而不要是 #,這可以防止不必要的頁面跳動;
所以,比較推薦的寫法是<a href="javascript:void(0)" onclick="fn(this)">
<a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com');return false;">跳轉3</a>
<a href="javascript:void(0)" onclick="subgo()">點我</a>
在這裡,javascript:void(0),沒啟實質上的作用,它僅僅是一個死連結,執行的函式是subgo()。
<a href="#" onclick="subgo()">點我</a>與<a href="javascript:void(0)" onclick="subgo()">點我</a>區別。
實際上 #包含了一個位置資訊預設的錨是#top 也就是網頁的上端 ,而javascript:void(0) 僅僅表示一個死連結,沒有任何資訊。所以呼叫指令碼的時候最好用void(0)
href一般是指向一個URL地址,也可以呼叫javascript ,如href="javascript:xxx();",文件中推薦這樣寫:<a href=" javascript:void(0)" onclick="xxx();">xx</a>,但是這種方法在複雜環境有時會產生奇怪的問題,儘量不要用javascript:協議做為A的href屬性,這樣不僅會導致不必要的觸發window.onbeforeunload事件,在IE裡面更會使gif動畫圖片停止播放。
點選這樣一個連結時會有兩種情況發生,1、如果dosomthing返回true,那麼瀏覽器就會發生跳轉到cool.html,相反如果返回false的話,就會忽略href。因此借住這個特性,我們可以寫這樣的程式碼......
<a href="cool.html" onclick = "doSomething()">做點什麼吧</a>
function doSomething(){
return confirm("您確認要離開嗎");
}
function doSomething(){
var ret = confirm("確認要離開嗎?");
if(ret){
window.loaction.href = "cool.html";
}
}