【W(wǎng)eb前端基礎(chǔ)知識(shí)】阻止a標(biāo)簽的跳轉(zhuǎn)

在我們平時(shí)寫練習(xí)的過程當(dāng)中，經(jīng)常會(huì)用到a標(biāo)簽來進(jìn)行鏈接跳轉(zhuǎn)。在很多情況下，我們不需要讓A標(biāo)簽跳轉(zhuǎn)到另外一個(gè)鏈接。我們會(huì)選擇給我們會(huì)選擇給a標(biāo)簽的href屬性內(nèi)容設(shè)置為#，成為一個(gè)錨點(diǎn)連接。

即設(shè)置為：

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

但這時(shí)候我們也存在著一個(gè)問題，即如果頁面過長(zhǎng)有滾動(dòng)條，且希望通過鏈接的 onclick事件執(zhí)行操作，點(diǎn)擊時(shí)就會(huì)跳轉(zhuǎn)到頁面的頂部，但很多頁面不需要這樣的效果，那今天我們就來給大家分享一下，如何阻止a標(biāo)簽的跳轉(zhuǎn)。

第一種方法：

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

即設(shè)置為：

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

第二種方法：

將它的 href屬性設(shè)為 javascript:; ，js內(nèi)容不寫任何內(nèi)容，即設(shè)置為：

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

第三種方法：

假設(shè)鏈接中同時(shí)存在href與onclick，如果想讓href屬性下的動(dòng)作不執(zhí)行，onclick必須得到一個(gè)false的返值;所以我們可以使用在進(jìn)行點(diǎn)擊時(shí)return false這種方式，即：

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

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

第四種方法：

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

說明：這里我們綁定了一個(gè)點(diǎn)擊事件，點(diǎn)擊超鏈接以后，會(huì)先執(zhí)行alert( '默認(rèn)跳轉(zhuǎn)阻止成功啦!' )，再進(jìn)行默認(rèn)的跳轉(zhuǎn)動(dòng)作。但是我們添加 return false;以后，點(diǎn)擊事件函數(shù)會(huì)直接結(jié)束，不會(huì)再執(zhí)行默認(rèn)的跳轉(zhuǎn)。

第五種方法：

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

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