a標簽如何禁止href跳轉或鏈接?


在做頁面時,如果想做一個鏈接點擊后不做任何事情,或者響應點擊而完成其他事情,可以設置其屬性 href = "#",但是,這樣會有一個問題,就是當頁面有滾動條時,點擊后會返回到頁面頂端,用戶體驗不好。

(1)阻止默認事件

阻止默認事件的發生有兩個方法:

  • return false
  • e.preventDefault()
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="https://www.baidu.com/">去百度</a><br>
        <!-- 阻止默認事件兩種方法 -->
        <a href="https://www.baidu.com/" onclick="return false">去百度(禁止默認事件:return false)</a><br>
        <a href="https://www.baidu.com/" id="go">去百度(禁止默認事件:e.preventDefault())</a>
        <script>
            //獲取元素節點 
 let go = document.querySelector("#go") // 點擊事件
 go.onclick = function (e) { // 阻止默認事件
 e.preventDefault() } </script>
    </body>
</html>

通過阻止a標簽默認事件就可以禁止a標簽跳轉!

 

(2)javascript:void(0)(少用)

javascript:void(0)這是一種偽協議,void(0)在IE中可能會引起一些問題,比如:造成gif動畫停止播放等

void是javascipt自身的操作符,它表示的是只執行表達式,但沒有返回值!

<a href="javascript:void(0)">點擊無法跳轉(javascript:void(0))</a>
<a href="javascript:void(null)">點擊無法跳轉(javascript:void(null))</a>

這兩種寫法都可以,都表示一個死鏈接,點擊無效果

 

(3)javascript:;

javascript:; 執行一段空白的javascript語句,返回空或者false值,從而防止鏈接跳轉

javascript:; 寫法比 javascript:void(0) 好,后者存在瀏覽器兼容bug

<a href="javascript:;">點擊無法跳轉(javascript:;)</a>

 

(4)href(####)

使用2個到4個#,見的大多是"####",也有使用"#all"等其他的。一個無意義的標簽指定,不做任何處理。

(這種方法會在瀏覽器地址欄上出現“####”)

<a href="####">點擊無法跳轉</a>

注意:只是用一個“#”是不行的,會默認刷新頁面回到頁面頂部

 

總結:

  • <a href="####"></a>

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

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

  • <a href="#" onclick="return false"></a>

  • <a href="#" id="go"></a>

<script> let go = document.querySelector("#go") go.onclick = function (e) { e.preventDefault() } </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM