最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅。注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明。

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。

目前有如下几种解决办法:

1)点击链接后不做任何事情

  1. 1.<a href="javascript:void(0);" >test</a>
  2. 2.<a href="javascript:;" >test</a>
  3. 3.<a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等其他的

2)点击链接后,响应用户自定义的点击事件

  1. 1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
  2. 2.<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href=""
  3. 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. 1. javascript:void (expression)
  2. 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)的几个问题的更多相关文章

  1. a标签的href="javascript:void(0)"和href="#"的区别

    修正一个说法上的bug吧.对于IE6来说,点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下. 我再来提供一个视角吧. 给<a>标签增加href属性,就意味着 ...

  2. a标签使用href=”javascript:void(0); 在火狐浏览器跟chrome 不兼容

    使用如下方式的链接.在Chrome中点击后行为符合预期,但在IE下会新开标签卡(根据参考资料,Firefox中有相同问题).<a href=”javascript:void(0);” targe ...

  3. 为了防止页面重新自动加载,可以给a标签设置href="javascript:void(0);"

    <a href="javascript:void(0);"></a> <!--按照格式要求,此处的0不能省略!! 虽然省略看上去也没什么影响.但是当发 ...

  4. 一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法

    一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...

  5. javascript中a标签把href属性设置为“javascript:void(0)”还是会打开空白页面的问题

    在项目中有个位置的点击a标签这里要加一个权限判断,但是之前使用的是js动态添加a标签,href的属性值是一个url,但是我要做权限判断之后,我的url就不能设置在href属性中了,这样的话我可以在a标 ...

  6. a标签中的href="#"与href="javascript:void(0)"区别

    转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...

  7. 兼容 火狐、IE 的中a标签用 javascript:void(0); 依然执行跳转的问题

    <a onclick="return false;" href="javascript: void(0)" target="_blank&quo ...

  8. a标签中的javascript:void(0)和#的区别

    #包含了一个位置信息 默认的锚是#top 也就是网页的上端 而javascript:void(0)   仅仅表示一个死链接 void(0)用于执行某些处理,但是不整体刷新页面 javascript:v ...

  9. 超级链接a中javascript:void(0)弹出另外一个框问题

    转字:http://my.oschina.net/castusz/blog/68186 结果在IE.Firefox.Chrome都是先执行的onclick事件,在项目中我们尽量不要同时使用这两种方式. ...

  10. js中 javascript:void(0) 用法详解

    点击链接不做任何事情: <a href="#" onclick="return false">test</a> <a href=& ...

随机推荐

  1. 【转】@Override must override a superclass method 问题解决

    原文网址:http://www.blogjava.net/anchor110/articles/339352.html 如果在使用Eclipse开发Java项目时,在使用 @Override 出现以下 ...

  2. SharePoint默认的欢迎WebPart中超链接样式

    转:http://www.cnblogs.com/Bear-Study-Hard/archive/2010/03/22/1691641.html 在core.css文件中 .ms-SpLinkButt ...

  3. [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 ...

  4. Hbase学习笔记(安装和基础知识及操作)

    1.Hbase简介 1.面向列的分布式数据库 2. 以HDFS作为文件系统 3. 利用MapReduce处理Hbase中海量数据 4. ZookKeeper作为协调工具 5. sqoop提供Hbase ...

  5. 020自动化测试 PK 手动测试

    一.手工测试为什么不可替代 手工测试是不可替代的,因为人是具有很强只能判断能力的,而工具是相对机械缺乏思维能力的东西 工具是人开发出来的 二.手工测试不可替代的表现 测试用例的设计:需要tester有 ...

  6. puppet学习:文件夹权限的问题

    之前Zabbix自动部署的文件夹结构总觉得别扭,今天下午抽空调整了下.调整完后,依然是例行的测试. 在客户端执行puppet agent -t时,报错如下: Failed to generate ad ...

  7. MSP430 flash的操作

    今天顺便研究了一下msp430的flash操作,很多人也许看了我的博客,会发现网站上有很多的人总结得比我要好,这点我承认,因为自己能力有限,但是,从这篇博客起,我会参照以前大神们写的博客,添加大神们写 ...

  8. .Net高级技术

    本次课程中讲的有的东西都是根据初学者的认知规律进行了调整,并不是严谨的,比如很多地方在多AppDomain条件下很多说法就不对了,但是说严谨了大家就晕了,因此继续不严谨的讲吧. 很多面试题都在这阶段的 ...

  9. 【暑假】[深入动态规划]UVa 1412 Fund Management

    UVa 1412 Fund Management 题目: UVA - 1412 Fund Management Time Limit: 3000MS   Memory Limit: Unknown   ...

  10. good bye 2015 B - New Year and Old Property

    题意:统计在n,m之间的数的二进制表示形式只有一个零的数目. 位运算模拟+dfs #include<iostream> #include<string> #include< ...