1. <dd id="jcnig"><nav id="jcnig"><delect id="jcnig"></delect></nav></dd>
      <dfn id="jcnig"><tt id="jcnig"><sup id="jcnig"></sup></tt></dfn>

    2. <cite id="jcnig"></cite>
      <cite id="jcnig"><tt id="jcnig"></tt></cite>

      <address id="jcnig"><nav id="jcnig"></nav></address>
    3. <address id="jcnig"><nav id="jcnig"></nav></address>
      400-650-7353

      精品課程

      您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】阻止a標簽的跳轉

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

      • 發布: Web前端培訓
      • 來源:
      • 2021-07-26 15:25:18
      • 閱讀()
      • 分享
      • 手機端入口

      在我們平時寫練習的過程當中,經常會用到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>   

      【Web前端基礎知識】阻止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> 

      學習疑問申請解答
      您的姓名
      您的電話
      意向課程
       

      中公優就業

      IT小助手

      掃描上方二維碼添加好友,請備注:599,享學習福利。

      >>本文地址:
      注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

      推薦閱讀

      優就業:ujiuye

      關注中公優就業官方微信

      • 關注微信回復關鍵詞“大禮包”,享學習福利
      QQ交流群
      在線疑問解答
      (加群備注“網站”)
      IT培訓交流群 加入群聊 +
      軟件測試 加入群聊 +
      全鏈路UI/UE設計 加入群聊 +
      Python+人工智能 加入群聊 +
      互聯網營銷 加入群聊 +
      Java開發 加入群聊 +
      PHP開發 加入群聊 +
      VR/AR游戲開發 加入群聊 +
      大前端 加入群聊 +
      大數據 加入群聊 +
      Linux云計算 加入群聊 +
      優就業官方微信
      掃碼回復關鍵詞“大禮包”
      享學習福利

      測一測
      你適合學哪門IT技術?

      1 您的年齡

      2 您的學歷

      3 您更想做哪個方向的工作?

      獲取測試結果
       
      課程資料、活動優惠 領取通道
       
       
      日本一本二本三本av网站,一本加勒比HEZYO东京热高清,一本久久A久久精品综合