<a>標籤深入講解
阿新 • • 發佈：2018-12-02
標籤中 href 和 onclick 的區別，以及href="javascript:xxx(this);"與onclick="xxx(this);" 傳遞this引數的區別
2017年08月18日 00:06:24 chunlynn 閱讀數：12009 所屬專欄： 深入淺出JavaScript<a>標籤中href屬性動作和onclick事件的區別，以及href="javascript:xxx(this);"與onclick="xxx(this);" 傳遞this引數的區別
一、href 與 onclick 的區別 我以前在寫<a>標籤的 href 和 onclick 一直很隨意，後來出過幾次問題，以後才開始重視這個問題： 首先摘錄一篇文件： 在Javascript中void是一個操作符，該操作符指定要計算一個表示式，但是不返回值。 void 操作符用法格式如下：
<a href="javascript:void(0);"下面的程式碼建立了一個超級連結，使用者單擊時會提交表單。>單擊此處什麼也不會發生</a>
<a href="javascript:void(document.form.submit());">單此處提交表單</a>下面程式碼則執行了subgo() 函式，
<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();">yyy</a>儘量不要用javascript:協議做為a的href屬性，因為這種方法在複雜環境，有時會產生奇怪的問題，有時會導致不必要的觸發window.onbeforeunload事件，在IE裡面更會使gif動畫圖片停止播放。 如果連結中同時有，href 屬性函式和 onclick 事件函式，那到底執行那個呢？
<a href="javascript:subgo2();" onclick="subgo();">點我</a>subgo()與subgo2()執行順序是怎樣的？ 連結的 onclick 事件被先執行，其次是 href 屬性下的動作（頁面跳轉，或 javascript 偽連結）； 假設連結中同時存在 href 與 onclick，如果想讓 href 屬性下的動作不執行，onclick 必須得到一個 false 的返回值，一般是這樣寫onclick="xxx();return false;" 。
<a href="javascript:subgo2();" onclick="subgo(); return false;">點我</a>上面的連結只執行onclick事件函式，href 裡的 subgo2()不執行。 如果頁面過長有滾動條，且希望通過連結的 onclick 事件執行操作。應將它的 href 屬性設為 javascript:void(0);，而不要是 #，這可以防止不必要的頁面跳動； 如果在連結的 href 屬性中呼叫一個有返回值的函式，當前頁面的內容將被此函式的返回值代替；
二、<a>標籤裡的函式事件寫法的實戰建議 如果在實際應用中確實是要用到<a>標籤來響應onclick事件的， 那麼就建議使用下面三種方法 <a href= "javascript:void(0);" onclick="doSomething();">test</a> <a href= "http://xxx/findname/" onclick="doSomething();return false">test</a> <a href= "http://xxx/findname/" onclick="doSomething();event.returnValue=false">test</a> 方法後面的分號";"，可加可不加，一般推薦加上。 三、<a>標籤語法結構 超級連結<a>標籤代表一個連結點，是英文anchor（錨點）的簡寫。它的作用是把當前位置的文字或圖片連線到其他的頁面、文字或影象，這已是眾所周知了，但關於它的語法結構可能有點鮮為人知，而要用活它則必須瞭解其語法結構。<a>標籤的基本語法結構是： <a class= type id＝value href＝reference name＝value rel= same|next|parent|previous rev＝value target＝window style＝value title= title onclick＝function onmouseout＝function onMouseOver=function>連線</a> 從標籤的語法結構可以看出，在設定一個超級連結時有很多引數可供選擇，以實現不同的連結效果，這有點出乎意料吧？！ 其中class和id選項：用於設定連結點所屬的型別和分配的ID號，通常不加以設定。 最常用的兩個引數是href和name。其中href是hypertext reference的縮略詞，用於設定連結地址。連結地址必須為url地址，如果沒有給出具體路徑，則預設路徑和當前頁的路徑相同。 連結到的檔案也分為幾種情況：如果為HTML檔案，則在當前瀏覽器中直接開啟；如果為可執行檔案（.exe檔案），則直接執行或下載，我們提供下載的檔案就是用它的這種特性做的；如果為文字檔案如word格式的檔案，則在瀏覽器中開啟此檔案，並可以進行編輯加工。 rel：表示設定連結的關係：rel=same表示待連結的檔案與此檔案相同，rel=next表示待連結的檔案為下一頁，rel＝parent 表示本檔案為待連結檔案的父檔案，rel=previous則表示待連結的檔案為上一頁。 rev：則用於設定反向連結。 target：是在採用幀視窗的情況下設定連結到哪一個視窗，還有target="_blank"是表示新開一視窗開啟網頁。 title：用於設定連結點被選到時顯示的標題。 onclick：對應於一個事件，當連結點被點選後將觸發這個事件，執行對應的子程式。 onmouseover：與onclick類似，對應的事件在滑鼠移到連結點上時被觸發。 onmouseout：對應的事件在滑鼠移出鎮接點後被觸發。 舉幾個例子： <a href= "http://xxx/blog/index.htm">回到主頁</a> <a href= "http://xxx/blog/sound.wav">播放語音檔案</a> <a href= "http://xxx/blog/javascipt.open()">執行對應的程式</a> <a herf= "document.doc">開啟對應的文件進行加工</a> 應用技巧 1、提供下載檔案 有不少網友來信問，提供下載的效果怎麼做。實際上仍然是做一個超級連結，不過供下載的檔案必須上傳到網站上。例：有一個“網頁技巧”的檔案包供下載，檔名是“homepagejq.zip”且已上傳到網站了，則這個連結的程式碼可以這樣寫：<a href="http://xxx/blog/homepagejq.zip">點選這裡下載“網頁技巧”檔案包</a>。 2、在新視窗中開啟連結的網頁 設定“target”的值為“_blank”。例：新開視窗開啟網頁“aboutme.htm”。產生該效果的程式碼是：<a href="http://xxx/blog/aboutme.htm" target="_blank">關於我......</a>。 3、滑鼠移到連結，顯示一行說明文字 設定“title”引數值，即可獲得這種效果。例：當滑鼠移到“黃山村夫”這個連結上時，顯示說明“這是一個介紹網頁製作技巧的專業網站”。這個連結的程式碼是這樣的：<a href="http://xxx/blog/hscf.htm" title="這是一個介紹網頁製作技巧的專業網站">黃山村夫</a>。 4、滑鼠移到一個連結上彈出一個視窗 這是設定onmouseover引數獲得的效果。例：當滑鼠移到一個連結上，彈出一個視窗並在視窗中顯示“滑鼠懸停效果演示！”。這個連結的程式碼是這樣的：<a href="http://xxx/blog/其它網頁.htm" onmouseover="alert('滑鼠懸停效果演示！')">連結</a>。用類似的方法可以製作當滑鼠按下後彈出提出示視窗、當滑鼠離開時彈出提示視窗的效果。 5、連結到本頁的指定內容 (可以用於tab頁的跳轉） 要實現連結到本頁的某一部分內容上（也就是“檔案內跳轉”），必須用引數name指定連結點的名稱。選定一塊文字，可以用name引數為其命名，以備 連結所用。所謂同一個檔案內的跳轉是指當讀者在閱讀一個很長的檔案的時候，若只對某部分的內容感興趣，可以採用跳躍式的閱讀方式。其基本格式是： <a href＝"＃連結點名稱">第二部分</a>第一部分內容...... <a name＝"連結點名稱"></a>第二部分實際內容...... 這樣當你點選“第二部分”這個超級連結後，就會自動轉移到“第二部分實際內容”這個地方來。“name”引數所定義的連結點名稱可以隨意取，但連結的“href”引數中的連結點名稱必須與其一致，不要忘記在前面加上“#”。 6、連結到其它頁面的指定內容位置 方法與上例類似，但在“href”引數中的連結點名稱前要加上網頁的檔名。例：有兩個網頁page1.htm和page2.htm ，每頁均有兩部分內容，現要在page1.htm中製作一個超級連結，按下該連結後將轉到page2.htm的第二部分內容上。那麼我們可以這樣做，首先在page2.htm第二部分內容開始的地方寫上這樣一句程式碼：
<a name="連結點名稱"></a>在page1.htm中寫上這樣一個連結程式碼：
<a href="http://xxx/blog/page2.htm#連結點名稱">page2 的第二部分內容</a>7、連結到E_mail 點選一個超級連結後，將啟動客戶機上的電子郵件管理軟體給你寫信。例這行程式碼：<a href="mailto:[email protected]">請給我寫信</a>。一旦你點選了“請給我寫信”這個連結，將自動啟動電子郵件管理軟體（如OE）的寫信功能，並已把郵件地址加在了收信人的位址列裡了。 連結不僅可以以文字作載體，也可以以圖象作載體，而且可以以圖片的某一部分作載體，且都能實現上述這些效果，方法也相同，所不同只是載體，也就是連結的兩對方括號中間的那部分，所以不再另舉例了。 例子： 用CheckBox控制元件時，想實現在每個checkbox後再加連結的功能，點連結實現一些功能之外，還要把checkbox選中。 <input type= "checkbox" name= "chk" id= "chkid"> <label for= "chkid">選中它 <a href= "javascript:void(0);" onclick="this.parentNode.click();">[label中的連結]</a> </label> 最後用parentNode來實現的。
四、 href="javascript:xxx(this);"和onclick="xxx(this);"的區別 正確的做法：在onclick的方法中傳遞this引數，將當前a標籤物件傳遞給方法。即使用onclick="xxx(this);"方法。 想傳遞當前物件給一個函式，於是就將這個URL寫成"javascript:shoControlSidebar(this);"，可是結果發現 這並不可行，傳遞過去的引數是一個物件，但是卻得不到任何其他資訊。我想得到的是innerText，而這個this並非 指向它所在的a標籤。 這是<a href="javascript:shoControlSidebar(this);"> 和<a href="javascript:void(0);" onclick="shoControlSidebar(this);"> 不同的地方。 當使用 onclick="shoControlSidebar(this);" 的時候，直譯器會給他包裝一個匿名函式，變成了： 程式碼如下: a.onclick = function anonymous() { shoControlSidebar(this); } 這個this指的就是a這個物件，而使用href的方式時，由於是一個地址，這個this就無處可指了。 程式碼如下：
<a href="javascript:void(0);" onclick="test(this);">A標籤測試</a>想獲取A 中的innerHTML 如果href="test(this);" 不但獲取不到值，而且程式將退出，href引向不對。 正確獲取當前標籤物件程式碼如下： JS實戰程式碼： //js的方法中引數不能再寫成test(this)了，因為this有特定的含義，所以寫成test(obj)才正確 function test(obj){ //obj就是onclick="test(this)"中this傳過來的，this指的就是頁面中點選的a標籤物件， //然後通過HTML的DOM屬性parentNode獲取a標籤的父節點，不斷往上獲取到最外層tr的父節點，然後進行下一步的其他事件操作了。 var node = obj.parentNode.parentNode.parentNode.parentNode; $(node).find("tr[class='parents']").find("input[type='checkbox']").prop("checked",'true'); node.parentNode.removeChild(node); alert(obj); //js alert(obj.innerHTML); //jquery alert($(obj).html()); } 全文完。