IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
在我們平時(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è)置為:
- <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è)置為:
- <a href="javascript: void(0)">這是一個(gè)鏈接</a>
第二種方法:
將它的 href屬性設(shè)為 javascript:; ,js內(nèi)容不寫任何內(nèi)容,即設(shè)置為:
- <a href="javascript:;">這是一個(gè)鏈接</a>
第三種方法:
假設(shè)鏈接中同時(shí)存在href與onclick,如果想讓href屬性下的動(dòng)作不執(zhí)行,onclick必須得到一個(gè)false的返值;所以我們可以使用在進(jìn)行點(diǎn)擊時(shí)return false這種方式,即:
- <a href = "https://www.baidu.com"
- onclick = "alert( '阻止成功' ); return false "
- >這是一個(gè)鏈接</a>
但是這種方式html和js結(jié)構(gòu)不分離,結(jié)構(gòu)不夠明確,所以我們可以使用下一種方法。
第四種方法:
- <a href="https://www.baidu.com" >這是一個(gè)鏈接</a>
- <script>
- var link = document.getElementsByTagName("a") [0];
- link.onclick = function () {
- alert ( '默認(rèn)跳轉(zhuǎn)阻止成功啦!' );
- return false;
- }
- </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;
- <a href="https://www.baidu.com">這是一個(gè)鏈接</a>
- <script>
- var link = document.getElementsByTagName("a") [0];
- if ( link.addEventListener ) {
- // 標(biāo)準(zhǔn)瀏覽器下綁定
- link.addEventListener( "click", fun,false);
- } else {
- // 低版本IE瀏覽器下綁定
- link.attachEvent( "onclick", fun );
- }
- function fun(ev) {
- // 對(duì)事件對(duì)象做一個(gè)兼容處理
- var ev = window.event || ev;
- // 標(biāo)準(zhǔn)瀏覽器 ev.preventDefault();
- // ie瀏覽器 ev.returnValue = false;
- // 對(duì)于其中一個(gè)做判斷,若有該方法則使用,沒有則說明為低版本IE瀏覽器
- ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
- }
- </script>
更多內(nèi)容
>>本文地址:http://m.littlerockbway.com/zhuanye/2021/69432.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個(gè)方向的工作?