【Web前端基礎知識】阻止a標簽的跳轉

在我們平時寫練習的過程當中，經常會用到a標簽來進行鏈接跳轉。在很多情況下，我們不需要讓A標簽跳轉到另外一個鏈接。我們會選擇給我們會選擇給a標簽的href屬性內容設置為#，成為一個錨點連接。

即設置為：

1. <a href="#">這是一個鏈接</a> 

但這時候我們也存在著一個問題，即如果頁面過長有滾動條，且希望通過鏈接的 onclick事件執行操作，點擊時就會跳轉到頁面的頂部，但很多頁面不需要這樣的效果，那今天我們就來給大家分享一下，如何阻止a標簽的跳轉。

第一種方法：

將它的 href屬性設為 javascript:void(0); ，而不要是 #，這可以防止不必要的頁面跳動;

即設置為：

1. <a href="javascript: void(0)">這是一個鏈接</a> 

第二種方法：

將它的 href屬性設為 javascript:; ，js內容不寫任何內容，即設置為：

1. <a href="javascript:;">這是一個鏈接</a>   

第三種方法：

假設鏈接中同時存在href與onclick，如果想讓href屬性下的動作不執行，onclick必須得到一個false的返值;所以我們可以使用在進行點擊時return false這種方式，即：

1. <a href = "https://www.baidu.com"    
2.    onclick = "alert( '阻止成功' )； return false "    
3. >這是一個鏈接</a>   

但是這種方式html和js結構不分離，結構不夠明確，所以我們可以使用下一種方法。

第四種方法：

1. <a href="https://www.baidu.com" >這是一個鏈接</a>   
2. <script>   
3. var link = document.getElementsByTagName("a") [0];   
4. link.onclick = function () {   
5.     alert ( '默認跳轉阻止成功啦！' )；   
6.     return false；   
7. }   
8. </script>  

說明：這里我們綁定了一個點擊事件，點擊超鏈接以后，會先執行alert( '默認跳轉阻止成功啦!' )，再進行默認的跳轉動作。但是我們添加 return false;以后，點擊事件函數會直接結束，不會再執行默認的跳轉。

第五種方法：

但是如果想要給當前標簽綁定多個事件時，使用普通 標簽.onclick = function() {}方法添加事件時，會進行事件覆蓋，所以有時我們會使用綁定事件，即標簽.addEventListener( 事件類型，事件處理函數，是否捕獲 )方法。在綁定事件中想要阻止默認事件要使用到事件對象event，之后使用event.preventDefault(),對于兼容IE瀏覽器的話，進行設置ev.returnValue = false;

1. <a href="https://www.baidu.com">這是一個鏈接</a>   
2. <script>   
3.     var link = document.getElementsByTagName("a") [0];   
4.     if ( link.addEventListener ) {   
5.     // 標準瀏覽器下綁定   
6.         link.addEventListener( "click"， fun，false)；   
7.    } else {   
8.     // 低版本IE瀏覽器下綁定   
9.          link.attachEvent( "onclick"， fun )；   
10.     }   
11.     function fun(ev) {   
12.     // 對事件對象做一個兼容處理   
13.         var ev = window.event || ev;   
14.         // 標準瀏覽器    ev.preventDefault();   
15.     // ie瀏覽器      ev.returnValue = false;   
16.     // 對于其中一個做判斷，若有該方法則使用，沒有則說明為低版本IE瀏覽器   
17.     ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;   
18.     }   
19. </script>