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

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

作者头像
德顺
发布于 2019-11-13 02:26:26
发布于 2019-11-13 02:26:26
4.1K03
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:3
代码可运行

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

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

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

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

演示如下:

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a href="javascript:alert('不跳转');">www.w3h5不跳转</a>

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a href="#" >test</a>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a href="####" >test</a>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
HTML5新增的几个a标签属性 移动端
声明:本文由w3h5原创,转载请注明出处:《HTML5新增的几个a标签属性 移动端》 https://www.w3h5.com/post/16.html
德顺
2019/11/13
1.5K0
HTML5新增的几个a标签属性 移动端
Python爬虫基础:常用HTML标签和Javascript入门
大部分HTML标签是闭合的,由开始标签和结束标签构成,二者之间是要显示的内容,例如:<title>网页标题</title>。也有的HTML标签是没有结束标签的,例如:<br />和<hr>。
Python小屋屋主
2018/09/20
1.8K0
JavaScript基础学习--01热身
一、js大致思路: 1、完成静态HTML+CSS 2、过一遍整体的大致js思路 3、按照从上到下的,从有至无的顺序完成js编写(包括先写大致轮廓,再细化细节部分) 4、调试代码      二、要点:
用户1148399
2018/01/09
8930
理解 javascript:void(0) 语句
你可能会遇到包含使用 href="javascript:void(0);" 的 <a> 元素。 当将表达式插入网页可能会导致不良副作用时,通常会使用 javascript void。
奋飛
2023/03/06
1.6K0
标签
p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,
河湾欢儿
2018/09/06
5900
JavaScript的引入方式和基本属性
2、引入外部js文件:通过 src 引入,此时 script 标签内添加任何js代码都不起效果。
德顺
2019/11/13
2.2K0
a标签href的功用
a标签在html内使用最多的就是超链接,在href属性中加入url链接即可。当然,他还有其他的一些功用,下面来看一下
OECOM
2021/02/04
2.9K0
某大厂一面:讲一下void 0是个啥?
The void operator evaluates the given expression and then returns undefined.
前端胖头鱼
2022/07/25
1.8K0
某大厂一面:讲一下void 0是个啥?
navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found
在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:
honey缘木鱼
2019/03/11
9390
navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found
JavaScript和jQuery自动跳转到另一个页面的方法
JavaScript 和 jQuery 跳转页面的方法有很多种,下面整理了几个:
德顺
2019/11/12
2.2K0
Html<a>标签href的困惑记载
近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信弹框。Chrome和Android平台都没问题,测试阶段发现Ios平台出现了点问题~弹框闪现一下之后,页面被重新渲染了,自然弹框又被消隐掉了。),经历一番查证,个中缘由原来如此。 出现问题后,立马走了段代码逻辑,发现并没任何逻辑问题。并且Chrome和Android平台又都OK的,只是Ios平台有此问题。经验不够丰富情形之下,只能在Ios手机上先Al
晚晴幽草轩轩主
2018/03/27
3.4K0
九、知识拓展
1、<a href="javascript:js_method();></a>"`
Qwe7
2022/06/18
9720
手机端a标签点击出现背景的解决方法
如上图所示,手机/移动端点击 a 链接会有一个背景,尝试设置 background: none 无效。
德顺
2019/11/13
2K0
2016.05 第1周 群问题分享
HTML+CSS a标签href属性的作用 2016.05.02~2016.05.06 核心概念 a标签href属性 参考答案 a标签定义超链接,用于从一个页面链接到另一个页面; a标签最重要的属性是href属性,它指示链接的目标;href属性里面的值url,规定链接指向的页面的url;在HTML5中,a标签始终是超链接,但是如果未设置href属性值,则只是超链接的占位符;如果不跳转页面则可以设置成href="javascript:;"或者href="void(0);"。 ---- 怎么在一个页面中点击图片
HTML5学堂
2018/03/13
6310
HTML全标签语法总结——前端从入门到学废
HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如[CSS]),或功能与行为(如 [JavaScript])。
JanYork_简昀
2024/03/07
8480
HTML全标签语法总结——前端从入门到学废
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
上一博文种讲解了JavaScript基础的ECMAScript,包括基本语法和部分对象,本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件,后文中有对应的实战练习。
Winter_world
2020/09/25
2.3K0
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
HTML5学习(五):基础标签(一)
<ul><li>需要显示的条目内容</li></ul> <h1 align="center">世界最后的国家是哪些</h1> <ul> <li>中国 :<t>自强</t></li> <li>韩国 :<t>悲剧</t></li> <li>印度 :<t>神奇</t></li> <li>美国 :<t>屌丝</t></li> </ul>
孙寅
2020/06/02
8340
HTML5学习(五):基础标签(一)
JavaScript最新手机、电话、身份证号码和汉字等的正则表达式
最近在使用 jQuery.validator 验证插件,其中有地方需要用到手机号码验证的功能。
德顺
2019/11/13
1.5K0
html a标签跳转_点击a标签不进行跳转
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170170.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/21
3.5K0
js中javascript:void(0)什么意思
void运算符通常仅用于获取未定义的原始值,通常使用“ void(0)”(等效于“ void 0”)。 在这些情况下,可以改用undefined全局变量(假设尚未将其分配给非默认值)。
IT工作者
2022/01/15
3.3K0
推荐阅读
相关推荐
HTML5新增的几个a标签属性 移动端
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验