a标签中关于javascript:void(0)的几个问题
最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅。注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明。
在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。
目前有如下几种解决办法:
1)点击链接后不做任何事情
- 1.<a href="javascript:void(0);" >test</a>
- 2.<a href="javascript:;" >test</a>
- 3.<a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等其他的
2)点击链接后,响应用户自定义的点击事件
- 1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
- 2.<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href=""
- 3.<a href="#" onclick="alert();event.returnValue=false;">test</a>
说明:
1.javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。(不懂,原话摘的,暂做记录)
2.链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可。
3.如果仅仅是想鼠标移过,变成手形,可以使用
<span style="cursor:pointer" onclick="foo()">Click Me!</span>
void是javascript的操作符,意思是:只执行表达式,但没有返回值,
void 操作符用法格式如下:
- 1. javascript:void (expression)
- 2. javascript:void expression
为了程序风格良好,建议使用第二种带上括号的
我们可以使用void操作符指定超级链接,如javascript:void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在JavaScript上没有任何效果,也就是说 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一样的。
关键是只要知道void是javascipt自身的操作符,它表示的是只执行表达式,但没有返回值!
另外页面会自动调回顶端,是因为"#"默认的瞄点位置是top,所以会出现这种情况。
a标签中关于javascript:void(0)的几个问题的更多相关文章
- a标签的href="javascript:void(0)"和href="#"的区别
修正一个说法上的bug吧.对于IE6来说,点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下. 我再来提供一个视角吧. 给<a>标签增加href属性,就意味着 ...
- a标签使用href=”javascript:void(0); 在火狐浏览器跟chrome 不兼容
使用如下方式的链接.在Chrome中点击后行为符合预期,但在IE下会新开标签卡(根据参考资料,Firefox中有相同问题).<a href=”javascript:void(0);” targe ...
- 为了防止页面重新自动加载,可以给a标签设置href="javascript:void(0);"
<a href="javascript:void(0);"></a> <!--按照格式要求,此处的0不能省略!! 虽然省略看上去也没什么影响.但是当发 ...
- 一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法
一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...
- javascript中a标签把href属性设置为“javascript:void(0)”还是会打开空白页面的问题
在项目中有个位置的点击a标签这里要加一个权限判断,但是之前使用的是js动态添加a标签,href的属性值是一个url,但是我要做权限判断之后,我的url就不能设置在href属性中了,这样的话我可以在a标 ...
- a标签中的href="#"与href="javascript:void(0)"区别
转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...
- 兼容 火狐、IE 的中a标签用 javascript:void(0); 依然执行跳转的问题
<a onclick="return false;" href="javascript: void(0)" target="_blank&quo ...
- a标签中的javascript:void(0)和#的区别
#包含了一个位置信息 默认的锚是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 void(0)用于执行某些处理,但是不整体刷新页面 javascript:v ...
- 超级链接a中javascript:void(0)弹出另外一个框问题
转字:http://my.oschina.net/castusz/blog/68186 结果在IE.Firefox.Chrome都是先执行的onclick事件,在项目中我们尽量不要同时使用这两种方式. ...
- js中 javascript:void(0) 用法详解
点击链接不做任何事情: <a href="#" onclick="return false">test</a> <a href=& ...
随机推荐
- 【转】@Override must override a superclass method 问题解决
原文网址:http://www.blogjava.net/anchor110/articles/339352.html 如果在使用Eclipse开发Java项目时,在使用 @Override 出现以下 ...
- SharePoint默认的欢迎WebPart中超链接样式
转:http://www.cnblogs.com/Bear-Study-Hard/archive/2010/03/22/1691641.html 在core.css文件中 .ms-SpLinkButt ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.4.1
Let $x,y,z$ be linearly independent vectors in $\scrH$. Find a necessary and sufficient condition th ...
- Hbase学习笔记(安装和基础知识及操作)
1.Hbase简介 1.面向列的分布式数据库 2. 以HDFS作为文件系统 3. 利用MapReduce处理Hbase中海量数据 4. ZookKeeper作为协调工具 5. sqoop提供Hbase ...
- 020自动化测试 PK 手动测试
一.手工测试为什么不可替代 手工测试是不可替代的,因为人是具有很强只能判断能力的,而工具是相对机械缺乏思维能力的东西 工具是人开发出来的 二.手工测试不可替代的表现 测试用例的设计:需要tester有 ...
- puppet学习:文件夹权限的问题
之前Zabbix自动部署的文件夹结构总觉得别扭,今天下午抽空调整了下.调整完后,依然是例行的测试. 在客户端执行puppet agent -t时,报错如下: Failed to generate ad ...
- MSP430 flash的操作
今天顺便研究了一下msp430的flash操作,很多人也许看了我的博客,会发现网站上有很多的人总结得比我要好,这点我承认,因为自己能力有限,但是,从这篇博客起,我会参照以前大神们写的博客,添加大神们写 ...
- .Net高级技术
本次课程中讲的有的东西都是根据初学者的认知规律进行了调整,并不是严谨的,比如很多地方在多AppDomain条件下很多说法就不对了,但是说严谨了大家就晕了,因此继续不严谨的讲吧. 很多面试题都在这阶段的 ...
- 【暑假】[深入动态规划]UVa 1412 Fund Management
UVa 1412 Fund Management 题目: UVA - 1412 Fund Management Time Limit: 3000MS Memory Limit: Unknown ...
- good bye 2015 B - New Year and Old Property
题意:统计在n,m之间的数的二进制表示形式只有一个零的数目. 位运算模拟+dfs #include<iostream> #include<string> #include< ...