a标签如何禁止href跳转或链接?

  • A+
所属分类:Web前端
摘要

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 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>