前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >a标签中防止跳转的href="javascript:;"、"void(0);"等都是什么意思

a标签中防止跳转的href="javascript:;"、"void(0);"等都是什么意思

作者头像
德顺
发布2019-11-13 10:26:26
3.4K0
发布2019-11-13 10:26:26
举报
文章被收录于专栏:前端资源前端资源

标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL(路径),包括片段标识符和 JavaScript 代码段。

javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击时就没有任何反应。这是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等 详细请看:HTML5新增的几个a标签属性 移动端

一般在这种情况下,会给绑定一个事件回调,来执行业务,如:

执行一段空白的javascript语句,返回空或者false值,从而防止链接跳转。跟当前a标签无关,这段代码始终都会执行。

演示如下:

1、设计一个a链接的代码,让其点击的时候执行一个 alert() 函数:

代码语言:javascript
复制
<a href="javascript:alert('不跳转');">www.w3h5不跳转</a>

2、此时在页面上显示一个a链接效果:

3、点击页面上的a链接,执行结果如上图:

其他防止页面跳转的实现方式:

代码语言:javascript
复制
<a href="#" >test</a>;

点击链接,页面默认上滚到页的顶部, 但可以加上 onclick="return false" ,防止上滚到页的顶部。

代码语言:javascript
复制
<a href="####" >test</a>;

使用2个到4个#,见的大多是 "####" ,也有使用 "#all" 等其他的。一个无意义的标签指定,不做任何处理。

代码语言:javascript
复制
<a href="javascript:void(0);" >test</a>;

javascript:void(0) 表示一个死链接,执行空事件。

声明:本文由w3h5原创,转载请注明出处:《a标签中防止跳转的href="javascript:;"、"void(0);"等都是什么意思》 https://cloud.tencent.com/developer/article/1537932

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档