詳解html中a標籤中的onclick和href的使用方法

高洛峰
發布: 2017-03-20 16:59:53
原創
2833 人瀏覽過

點選

連結的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動畫圖片停止播放
下面是自己遇到的:
如果不設定href屬性在IE6下面會不回應hover。雙擊後會選取標籤的父容器而非這個一a標籤(IE下方都存在這一問題)。
假定我們有個fn方法,需要取到這個元素,第一個方法傳入的this是空值。
所以,比較建議的寫法是

下面程式碼則執行了subgo()函數,
< ;a href="javascript:void(0)" onclick="subgo()">點我

在這裡,javascript:void(0),沒啟實質上的作用,它僅僅是一個死鏈接,執行的函數是subgo()。
點我點我差別。
實際上 #包含了一個位置資訊預設的錨是#top 也就是網頁的上端 ,而javascript:void(0) 僅僅表示一個死鏈接,沒有任何資訊。所以呼叫腳本的時候最好用void(0)
    href一般是指向一個URL位址,也可以呼叫javascript ,如href="javascript:xxx();",文件中推薦這樣寫:xx,但是這種方法在複雜環境有時會產生奇怪的問題,盡量不要用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中。
----------------------------------------------- -------------------------------------------------- -----------------------------------------
至於其他樓說的【 IE8中,如:"javascript:;","javascript:void(0)","javascript:void(null)"都被拒絕】因為沒有安裝IE8,不敢妄下結論。
----------------------------------------------- -------------------------------------------------- -----------------------------------------
如果在實際應用中確實是要用到標籤來回應onclick事件的。
那麼建議使用下面三種方法
1.
test
2.< a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();return false">test
3.test
---- -------------------------------------------------- --------------------------------------------
超級連結< ;a>標記代表一個連結點,是英文anchor(錨點)的簡寫。它的作用是把目前位置的文字或圖片連接到其他的頁面、文字或圖像,這已是眾所周知了,但關於它的語法結構可能有點鮮為人知,而要用活它則必須了解其語法結構。 標記的基本語法結構是:
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>連接
  從標記的語法結構可以看出,在設定一個超級連結時有很多參數可供選擇,以實現不同的連結效果,這有點出乎意料吧? !
  其中class和id選項:用來設定連結點所屬的類型和指派的ID號,通常不加以設定。最常用的兩個參數是href和name。其中href是hypertext reference的縮寫詞,用來設定連結位址。連結位址必須為url位址,如果沒有給予特定路徑,則預設路徑和目前頁的路徑相同。 連結到的文件也分為幾種情況:如果為HTML文件,則在當前瀏覽器中直接開啟;如果為可執行檔(.exe檔),則直接執行或下載,我們提供下載的文件就是用它的這種特性做的;如果為文字文件如word格式的文件,則在瀏覽器中開啟此文件,並可以進行編輯加工。
  rel:表示設定連結的關係:rel=same表示待連結的文件與此文件相同,rel=next表示待連結的文件為下一頁,rel=parent表示本文件為待連結文件的父文件,rel=previous則表示待連結的文件為上一頁。
  rev:則用於設定反向連結。
  target:是在採用幀窗口的情況下設定連結到哪一個窗口,還有target="_bank"是表示新開一窗口打開網頁。
  title:用來設定連結點被選到時顯示的標題。
  onclick:對應於一個事件,當連結點被點擊後將觸發這個事件,執行對應的子程式。
  onmouseover:與onclick類似,對應的事件在滑鼠移到連結點上時被觸發。
  onmouseout:對應的事件在滑鼠移出鎮接點後被觸發。
  舉幾個例子:
回到首頁
< a href="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">播放語音檔案
執行對應的程式
document.doc">開啟對應的文件進行加工< ;/a>
  應用技巧
  1、提供下載檔案
  有不少網友來信問,提供下載的效果怎麼做。實際上仍然是做一個超級鏈接,不過供下載的文件必須上傳到網站上。範例:有一個「網頁技巧」的檔案包可以下載,檔案名稱是「homepagejq.zip」且已上傳到網站了,則這個連結的程式碼可以這樣寫:點這裡下載「網頁技巧」檔案包
  2、在新視窗中開啟連結的網頁
  設定「target」的值為「_blank」。例:新開視窗開啟網頁「aboutme.htm」。產生此效果的代碼是:關於我......  3、滑鼠移到鏈接,顯示一行說明文字
  設定“title”參數值,即可獲得這種效果。例:當滑鼠移到「黃山村夫」這個連結上時,顯示說明「這是一個介紹網頁製作技巧的專業網站」。這個連結的程式碼是這樣的:
黃山村夫
  4、滑鼠移到一個連結上彈出一個視窗
  這是設定onmouseover參數所獲得的效果。範例:當滑鼠移到一個連結上,彈出一個視窗並在視窗中顯示「滑鼠懸停效果示範!」。這個連結的程式碼是這樣的:連結。用類似的方法可以製作當滑鼠按下後彈出提出示視窗、當滑鼠離開時彈出提示視窗的效果。
  5、連結到本頁的指定內容
  要實現連結到本頁的某一部分內容上(也就是「檔案內跳轉」),必須用參數name指定連結點的名稱。選定一塊文本,可以用name參數為其命名,以備 連結所用。所謂同一個文件內的跳躍是指當讀者在閱讀一個很長的文件的時候,若只對某部分的內容感興趣,可以採用跳躍式的閱讀方式。其基本格式為:
第二部分第一部分內容......
......... ..................................
< ;/a>第二部 實際內容......
................................ ...........
  這樣當你點擊「第二部分」這個超級連結後,就會自動轉移到「第二部分實際內容」這個地方。 「name」參數所定義的連結點名稱可以隨意取,但連結的「href」參數中的連結點名稱必須與其一致,不要忘記在前面加上「#」。
  6、連結到其它頁面的指定內容位置
  方法與上例類似,但在「href」參數中的連結點名稱前要加上網頁的檔案名稱。範例:有兩個網頁page1.htm和page2.htm ,每頁均有兩部分內容,現在要在page1.htm中製作一個超級鏈接,按下該鏈接後將轉到page2.htm的第二部分內容上。那我們可以這樣做,首先在page2.htm第二部分內容開始的地方寫上這樣一句代碼:
;在page1.htm寫上這樣一個連結代碼:page2 的第二部分內容
  7、連結到E_mail
  點擊一個超級連結後,將啟動客戶機上的電子郵件管理軟體給你寫信。例這行程式碼:請寫信給我。一旦你點擊了“請給我寫信”這個鏈接,將自動啟動電子郵件管理軟體(如OE)的寫信功能,並已把郵件地址加在了收信人的地址欄裡了。
  連結不僅可以以文字作載體,也可以以圖像作載體,而且可以以圖片的某一部分作載體,且都能實現上述這些效果,方法也相同,所不同只是載體,也就是鏈結的兩對方括號中間的部分,所以不再另舉例了。

以上是詳解html中a標籤中的onclick和href的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!