最近看了好几个关于<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=& ...
随机推荐
-
js函数前面写上分号的原因
说个之前先说,网站上传一些文件,考虑到性能问题,会用一些压缩软件来压缩代码(grunt,glup,webpack,etc..),这时候就可能出现一个问题.看下面代码 (function a(){... ...
-
jquery.chosen.js实现模糊搜索
jquery.chosen.js查询时,chosen默认从第一个字符搜索,所以写中间的字符搜索时,是搜索不出来的 若想实现中间字符的模糊查询,下面的js中(search_contains属性为true ...
-
Oracle的spool命令
在控制台上使用spool 路径+文件名 命令可以将整个过程写入指定的文件中, 结束使用spool off 命令, 当执行spool off后文件中的内容才能看见; ed命令修改当前缓冲区的上一条命令;
-
拓扑排序 HDU - 5695
众所周知,度度熊喜欢各类体育活动. 今天,它终于当上了梦寐以求的体育课老师.第一次课上,它发现一个有趣的事情.在上课之前,所有同学要排成一列, 假设最开始每个人有一个唯一的ID,从1到NN,在排好队之 ...
-
Java基本语法-----java变量
1.变量的概述 用于存储可变数据的容器. 2.变量存在的意义 计算机主要用于处理生活中的数据,由于生活中存在大量的可变数据,那么计算机就必须具备存储可变数据的能力. 比如: 1.时间每一秒都在发生变化 ...
-
springboot后台运行
nohup java -jar shareniu.jar >out.txt &
-
js实现word转换为html
前言 最近接到一个需求,实现上传一个word文档,然后将该word转换成html丢给服务端存上.进行技术调研后发现有三种方法可以实现这个功能:ActiveXObject.docx2html.mammo ...
-
springboot+mockito 异常解决方案
系统启动的异常日志如下 javax.net.ssl.* java.lang.IllegalStateException: Failed to load ApplicationContext at or ...
-
typescript handbook 学习笔记1
概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...
-
CRM rbac 组件的应用
1 拷贝 rbac 组件到项目中,注册这个app 2 数据库迁移 1 删除rbac下migrations里除了init外的文件 2 修改用户表 class User(models.Model): &q ...