首頁 > 文章 > web前端 > Html的a標籤中href和onclick用法區別以及優先級別

Html的a標籤中href和onclick用法區別以及優先級別

不言原創: 2018-06-09 17:01:102246瀏覽

本文主要分享一篇關於Html A標籤中href和onclick用法、區別、優先級別,具有很好的參考價值,有需要了解的朋友可以看看

如果不設定href屬性在IE6下面會不回應hover。雙擊後會選取標籤的父容器而非這個一a標籤（IE下方都存在這一問題）。

程式碼如下

<a href="javascirpt:fn(this)"> <a onclick="fn(this)">

假定我們有個fn方法，需要取到這個元素，第一個方法傳入的this是空值。

所以，比較建議的寫法是

#程式碼如下

<a href="javascript:void(0)" onclick="fn(this)">

下面程式碼則執行了subgo()函數，

程式碼如下

<a href="javascript:void(0)" onclick="subgo()">点我</a>

在這裡，javascript:void(0),沒啟實質上的作用，它只是一個死鏈接，執行的函數是subgo()。

程式碼如下

点我与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

實際上#包含了一個位置資訊預設的錨是#top 也就是網頁的上端，而javascript:void(0) 僅僅表示一個死鏈接，沒有任何資訊.所以呼叫腳本的時候最好用void(0)

href一般是指向一個URL位址，也可以呼叫javascript ,如href="javascript:xxx();",文檔中推薦這樣寫：

程式碼如下

<a href="http://www.jb51.net/zhongxing/U880/ javascript:void(0)" onclick="xxx();">xx</a>

但是這種方法在複雜環境有時會產生奇怪的問題，盡量不要用javascript:協定做為A的href屬性，這樣不僅會導致不必要的觸發window .onbeforeunload事件，在IE裡面更會使gif動畫圖片停止播放。

我們知道連結的onclick 事件先執行，其次是href 屬性下的動作（頁面跳轉，或javascript 偽連結），如果不想執行href 屬性下的動作執行，onclick 需要要回傳false ，一般是這樣寫onclick="xxx();return false;".

TabPane的JS源碼，由於onclick沒有回傳FALSE，當IFRMAE中關閉TABPANE時會導致href執行，頁面顯示有問題。解決辦法就是將下面程式碼複製到使用TAB的JSP中。

Html A標籤中href 與onclick 同時使用的問題優先順序

##1 順序

#ie 6 : href 先觸發onclick 後觸發

其他瀏覽器先觸發onlick 後觸發href

2 href="javascript: xxx()"

#不能傳入this作為參數

onclick可以

程式碼如下

<a href="javascript:alert(&#39;href event&#39;);" onclick="clickevent(this);">

3 優先觸發的方法如果傳回false 導致後一個事件不被觸發

例如

程式碼如下

<a href="javascript:alert(&#39;href event&#39;);" onclick="clickevent(this); return false;">

ee7959cc8dd4be16ef633321c03dac32 會導致頁面定位到書籤位置，

由於1和4 的原因

在ie6 下同時有442f7dc8b01e2d61bfae6d36d5f3dec6 如下面一個列子。

我們需要A在第一次和第二次點擊的時候訪問href 第3次以後的就訪問另一個地址

代碼如下

var href=0
function clicka(obj)
{
 if (href==2)
 {
 obj.href="http://www.baidu.com?qc";
 }else
 {
 href++;
 }
 return true;
}
 <a href="http://www.jb51.net/" target=_blank id="showa" onclick="clicka(this)"> 开屏高速下载 </a>

#在a標籤的href與onclick中使用javascript的區別

#連結的onclick 事件先執行，其次是href 屬性下的動作（頁面跳轉，或javascript 偽連結）;

假設連結中同時存在href 與onclick，如果想讓href 屬性下的動作不執行，onclick 必須得到一個false 的回傳值。不信，你可以將 goGoogle 函數中的 return false 註解掉；

如果頁面過長有滾動條，且希望透過連結的 onclick 事件執行操作。應將它的href 屬性設為javascript:void(0);，而不要是#，這可以防止不必要的頁面跳動；

#如果在連結的href 屬性中呼叫一個有傳回值的函數，目前頁面的內容將被此函數的回傳值取代；

在按住Shift鍵的情況下會有所區別。

今天我遇到的問題，在IE6.0裡以href的形式存取不到parentNode。

盡量不要用javascript:協定做為A的href屬性，這樣不僅會導致不必要的觸發window.onbeforeunload事件，在IE裡面更會使gif動畫圖片停止播放。

就這些，花了不少時間在這上面。

[緣由]

用CheckBoxList控制項時想實現在每個checkbox後面再加連結的功能，點連結實作一些功能之外，還要把checkbox選取。

程式碼如下

<input type="checkbox" name="chk" id="chk">
<label for="chk">选中它<a onclick="this.parentNode.click();" href="http://luwenxiang1990.blog.163.com/blog/#" style="border:solid 1px blue;">[label中的链接]</a></label>

最後用parentNode來實現的。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

Html的a標籤中href和onclick用法區別以及優先級別

相關文章