空链接的作用以及<a href="#"></a>和<a href="javascript:;"></a>的区别

空链接的作用以及<a href="#"></a>和<a href="javascript:;"></a>的区别
在很多时候, 需要设置超链接不发生跳转,最有可能出现的场景是:

<a>的点击有更复杂的逻辑,需要通过onclick的函数才能完成,所以就不需要href。但是如果不加href属性,又没有超链接的页面效果,也就是不会出现下划线,以及点击之后字体样式的变化。特别是函数执行的是异步的请求,这种状况广泛的出现在一些前端框架里。
设置href属性点击不生效,称为空链接,常用的又两种方法:

<a href="#"></a> , 本页链接,链接到当前页面
<a href="javascript:;"></a>,空链接, 相比# , 如果有滚动条不会到顶部
这两种方式都是不产生跳转到效果。因为href可以直接识别JS的代码,所以可以使用javascript:的方式。
javascript: 是一个伪协议,通过链接调用一个javascript函数,如果函数为空,则调用的是
空函数。 javascript:;也可以写为javascript:void(0);,称为死链接,更常使用在Ajax中

<a href="javascript:void(0)"></a>
但是javascript:void(0) 的使用会有一些问题,比如在IE中会引起动画停止播发等问题。 href="#"又有可能发生页面滚动,可以使用两个或多个 # 就不会发生页面的滚动了。比如
<a href="#####"></a> 有滚动条不会到顶部
————————————————
版权声明:本文为CSDN博主「oscar999」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/oscar999/article/details/106799535

posted @   勋勋的大宝贝  阅读(661)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程
点击右上角即可分享
微信分享提示