a标签如何禁止href跳转或链接?
2022-01-13 15:56
399 查看
在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 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>
相关文章推荐
- a标签取消默认的href链接跳转
- a标签href不跳转 禁止跳转
- 碰到链接label标签导致a href链接不能跳转
- js如何触发a标签的href链接,以标签页的形式
- [置顶] a标签href跳转---传值---禁止单引号
- a标签href跳转---传值---禁止单引号
- js设置a标签href不跳转 禁止跳转
- 如何设置使谷歌浏览器打开链接自动跳转到新标签页而不是覆盖当前页面?
- a标签href不跳转 禁止跳转
- 禁止a标签跳转链接
- 网页端如何实现点击链接跳转到QQ(手机QQ)打开会话
- 如何点击链接直接跳转到app store指定应用下载页面
- 织梦channelartlist和channel标签外部链接如何新窗口打开
- iOS 如何生成跳转到Appstore的链接及二维码
- 将鼠标放在A标签上时浏览器左下角会显示跳转后界面地址,如何隐藏
- 总结:a标签加入单击事件 屏蔽href跳转页面
- MUI跳转链接,不要用a标签
- 微信中如何实现点击链接跳转到手机默认外部浏览器下载apP文件
- a标签href无值 onclick事件跳转
- 如何解决window.location.href不跳转的问题