去取點擊鬥動

鏈接的 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下都存在這一問題)。 
<a href="javascirpt:fn(this)"> <a οnclick="fn(this)"> 假定我們有個fn方法,需要取到這個元素,第一個方法傳入的this是空值。 

所以,比較推薦的寫法是<a href="javascript:void(0)" οnclick="fn(this)"> 


下面代碼則執行了subgo()函數, 

<a href="javascript:void(0)" οnclick="subgo()">點我</a> 

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

<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" οnclick="subgo()">點我</a>與<a href="javascript:void(0)" οnclick="subgo()">點我</a>區別。 

實際上 #包含了一個位置信息默認的錨是#top 也就是網頁的上端 ,而javascript:void(0) 僅僅表示一個死鏈接,沒有任何信息。所以調用腳本的時候最好用void(0) 

    href一般是指向一個URL地址,也可以調用javascript ,如href="javascript:xxx();",文檔中推薦這樣寫:<a href="http://blog.163.com/wb_zhaoyuwei/blog/ javascript:void(0)" οnclick="xxx();">xx</a>,但是這種方法在複雜環境有時會產生奇怪的問題,儘量不要用javascript:協議做爲A的href屬性,這樣不僅會導致不必要的觸發window.onbeforeunload事件,在IE裏面更會使gif動畫圖片停止播放。 

    我們知道鏈接的 onclick 事件被先執行,其次是 href 屬性下的動作(頁面跳轉,或 javascript 僞鏈接),如果不想執行href 屬性下的動作執行,onclick 需要要返回 false ,一般是這樣寫οnclick="xxx();return false;". 

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

------------------------------------------------------------------------------------------------------------------------------------------ 



至於其他樓說的【IE8中,如:"javascript:;","javascript:void(0)","javascript:void(null)"都被拒絕】因爲沒有安裝IE8,不敢妄下結論。 



------------------------------------------------------------------------------------------------------------------------------------------ 



如果在實際應用中確實是要用到<a>標籤來響應onclick事件的。 
那麼就建議使用下面三種方法 
1.<a href="javascript:void(0)" οnclick="doSomething()">test</a> 
2.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" οnclick="doSomething();return false">test</a> 
3.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" οnclick="doSomething();event.returnValue=false">test</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="_bank"是表示新開一窗口打開網頁。 

  title:用於設定鏈接點被選到時顯示的標題。 

  onclick:對應於一個事件,當鏈接點被點擊後將觸發這個事件,執行對應的子程序。 

  onmouseover:與onclick類似,對應的事件在鼠標移到鏈接點上時被觸發。 

  onmouseout:對應的事件在鼠標移出鎮接點後被觸發。 

  舉幾個例子: 

<a href="http://blog.163.com/wb_zhaoyuwei/blog/index.htm">回到主頁</a> 
<a href="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">播放語音文件</a> 
<a href="http://blog.163.com/wb_zhaoyuwei/blog/javascipt.open()">執行對應的程序</a> 
<a herf="document.doc">打開對應的文檔進行加工</a> 
  應用技巧 

  1、提供下載文件 

  有不少網友來信問,提供下載的效果怎麼做。實際上仍然是做一個超級鏈接,不過供下載的文件必須上傳到網站上。例:有一個“網頁技巧”的文件包供下載,文件名是“homepagejq.zip”且已上傳到網站了,則這個鏈接的代碼可以這樣寫:<a href="http://blog.163.com/wb_zhaoyuwei/blog/homepagejq.zip">點擊這裏下載“網頁技巧”文件包</a>。 

  2、在新窗口中打開鏈接的網頁 

  設定“target”的值爲“_blank”。例:新開窗口打開網頁“aboutme.htm”。產生該效果的代碼是:<a href="http://blog.163.com/wb_zhaoyuwei/blog/aboutme.htm" target="_blank">關於我......</a>。 

  3、鼠標移到鏈接,顯示一行說明文字 

  設定“title”參數值,即可獲得這種效果。例:當鼠標移到“黃山村夫”這個鏈接上時,顯示說明“這是一個介紹網頁製作技巧的專業網站”。這個鏈接的代碼是這樣的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/hscf.htm" title="這是一個介紹網頁製作技巧的專業網站">黃山村夫</a>。 

  4、鼠標移到一個鏈接上彈出一個窗口 

  這是設定onmouseover參數獲得的效果。例:當鼠標移到一個鏈接上,彈出一個窗口並在窗口中顯示“鼠標懸停效果演示!”。這個鏈接的代碼是這樣的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/其它網頁.htm" οnmοuseοver="alert('鼠標懸停效果演示!')">鏈接</a>。用類似的方法可以製作當鼠標按下後彈出提出示窗口、當鼠標離開時彈出提示窗口的效果。 

  5、鏈接到本頁的指定內容 

  要實現鏈接到本頁的某一部分內容上(也就是“文件內跳轉”),必須用參數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://blog.163.com/wb_zhaoyuwei/blog/pagw2.htm#鏈接點名稱">page2 的第二部分內容</a>。 

  7、鏈接到E_mail 

  點擊一個超級鏈接後,將啓動客戶機上的電子郵件管理軟件給你寫信。例這行代碼:<a href="mailto:[email protected]">請給我寫信</a>。一旦你點擊了“請給我寫信”這個鏈接,將自動啓動電子郵件管理軟件(如OE)的寫信功能,並已把郵件地址加在了收信人的地址欄裏了。 

  鏈接不僅可以以文本作載體,也可以以圖象作載體,而且可以以圖片的某一部分作載體,且都能實現上述這些效果,方法也相同,所不同只是載體,也就是鏈接的兩對方括號中間的那部分,所以不再另舉例了。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章