首頁 > web前端 > html教學 > html中關於a標籤的onclick以及href的執行順序詳解

html中關於a標籤的onclick以及href的執行順序詳解

黄舟
發布: 2017-07-27 13:46:38
原創
2725 人瀏覽過

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(&#39;http://www.sina.com&#39;);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,但是這種方法在複雜環境有時會產生奇怪的問題,盡量不要用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";
}
}
登入後複製

以上是html中關於a標籤的onclick以及href的執行順序詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板