超鏈接的href和onclick並存困惑 ---收集

在用 <a href="" οnclick=""> 時,出現了一些問題,困惑了我許久,現在從網友那邊得到以下結論,讓我豁然開朗,問題也迎刃而解。

鏈接的onclick 事件被先執行,其次是href 屬性下的動作(頁面跳轉,或 javascript 僞鏈接);假設鏈接中同時存在hrefonclick,如果想讓href 屬性下的動作不執行,onclick 必須得到一個false 的返回值;如果頁面過長有滾動條,且希望通過鏈接的 onclick 事件執行操作。應將它的 href 屬性設爲 javascript:void(0);,而不要是 #,這可以防止不必要的頁面跳動;如果在鏈接的 href 屬性中調用一個有返回值的函數,當前頁面的內容將被此函數的返回值代替;在按住Shift鍵的情況下會有所區別。今天我遇到的問題,在IE6.0裏以href的形式訪問不到parentNode。儘量不要用javascript:協議做爲A的href屬性,這樣不僅會導致不必要的觸發window.onbeforeunload事件,在IE裏面更會使gif動畫圖片停止播放。
相信大家一定對<a/>標籤一定熟悉的不能在熟悉了,但是你們有沒有深刻理解href和onclick兩個屬性的意義呢?之前用href和 onclick屬性也是一直很隨意,但後來出過幾次問題,現在把這個問題總結到下面,希望對遇到過同樣困惑的朋友有所幫助。

首先摘錄一篇文檔:

在Javascript中void是一個操作符,該操作符指定要計算一個表達式但是不返回值。

void 操作符用法格式如下:
1. javascript:void (expression)
2. javascript:void expression

expression 是一個要計算的 Javascript 標準的表達式。表達式外側的圓括號是選的,但是寫上去是一個好習慣。 (實現版本 Navigator 3.0)

你以使用 void 操作符指定超級鏈接。表達式會被計算但是不會在當前文檔處裝入任何內容。

下面的代碼創建了一個超級鏈接,當用戶點擊以後不會發生任何事。當用戶鏈接時,void(0) 計算爲 0,但 Javascript 上沒有任何效果。

<A HREF="javascript:void(0)">單此處什麼也不會發生</A>

下面的代碼創建了一個超級鏈接,用戶單擊時會提交表單。

<A HREF="javascript:void(document.form.submit())">
單此處提交表單</A>

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

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

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

<a href="#" ο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=" 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中。

TabPane.prototype.appendTitle = function(tabpage){
var td = $create("td");
var strHTML = "<table class="" + TAB_STYLE_TABLE + "" border="0" cellspacing="0" cellpadding="0"><tr>";
strHTML +="<td><div class=""+TAB_STYLE_LEFT+""></div></td>";
strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
strHTML +="<div style="white-space:nowrap;page-break-before: always;page-break-after: always;">";
strHTML += tabpage.getTitle();
strHTML +="</div></td>";
if(tabpage.showCloseButton){
strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
strHTML +="<a class="close" href="#" οnclick="$o(\"" + this.id + "\").getTab(\"" + tabpage.id + "\").close();return false;">";
if(isIE){
strHTML +="<div></div></a>";
}else{
strHTML +="<div class="close"></div></a>";
}
strHTML +="</td>";
}
if(tabpage.allowReload){
strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
strHTML +="<a class="reload" href="#" οnclick="$o(\"" + this.id + "\").getTab(\"" + tabpage.id + "\").reload();return false;">";
if(isIE){
strHTML +="<div></div></a>";
}else{
strHTML +="<div class="reload"></div></a>";
}
strHTML +="</td>";
}
strHTML +="<td><div class=""+TAB_STYLE_RIGHT+""></div></div>";
strHTML +="</td></tr></table>";
td.className = TAB_STYLE_NOMAL + this.styleSuffix;
td.innerHTML = strHTML;
tabpage.__titleTD = td;
tabpage.setTitleTD();
tabpage.initStatus();
this.__titleTR.insertBefore(td,this._titleTD);
tabpage.titleWidth = td.offsetWidth;
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章