1. 程式人生 > >阻止A標籤預設行為的問題

阻止A標籤預設行為的問題

1. 連結的onclick事件被先執行,其次是href屬性下的動作(頁面跳轉,或 javascript 偽連結);

2. 假設連結中同時存在href與onclick,如果想讓href屬性下的動作不執行,onclick必須得到一個false的返值

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

4. 如果在連結的 href屬性中呼叫一個有返回值的函式,當前頁面的內容將被此函式的返回值代替;

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

6. 今天我遇到的問題,在IE6.0裡以href的形式訪問不到parentNode。

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

 

關於:void

Java script中void是一個操作符,該操作符指定要計算一個表示式但是不返回值。

void 操作符用法格式如下:

1. javascript:void (expression)

2. javascript:void expression

expression 是一個要計算的 Javascript 標準的表示式。表示式外側的圓括號是選的,但是寫上去是一個好習慣。

你以使用 void 操作符指定超級連結。表示式會被計算但是不會當前文件處裝入任何內容。

 

關於 return false

 

通常, event.preventDefault()都會放在event handler的第一行。
這樣的話, 假設在event handler

中有一個JavaScript error,
那麼, 放在first lineevent.preventDefault()就可以阻止submit行為, console還可以report這error.

而, return false是放在event handler的最後一行的。
並且, 他是相當於event.preventDefault()event.stopPropagation(), 如果我們想阻止bubbling的話, 就可以用return false.

更重要的是, return false只能用於DOM Level 0 Event handler,DOM Level 2 Event Handler是沒用的, 

複製程式碼

1// get the anchors 

var anchors = document.querySelectorAll("a");
3 var a1 = anchors[0];
4 var a2 = anchors[1];
5 // DOM Level 0 Event Handler
6 a1.onclick = function(event) {  return false;};
7 // DOM Level 2 Event Handler
8 a2.addEventListener("click", function() {  return false;}, false);

複製程式碼

而, event.preventDefault()2者都相容。

 

綜上, 當然是推薦用event.preventDefault()啦。

 

幾種格式

 

1: <a href="####"></a>

2:<a href="javascript:void(0)"></a>

3:<a href="javascript:"></a>

4:<a href="javascript:void(null)"></a>

5:<a href="#" onclick="return false"></a>