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=& ...
随机推荐
- 【C++】【斐波那契】求第几个斐波那契数字。
首先在头文件 whichfibonaccinumber.h 中写了一个使用加法的解法.没有验证输入数字是否小于0. #ifndef WHICHFIBONACCINUMBER_H_ #define WH ...
- 体验Azure的 Automation “自动化” 服务预览版
一直想要实现对Azure上跑的虚机进行定期的自动备份.在网上搜了一下有关的解决方案,发现一个不错的帖子,是基于国外的Azure服务做的.基本原理就是利用Azure的Automation(自动化)服务来 ...
- Java 程序员在写 SQL 时常犯的 10 个错误
Java程序员编程时需要混合面向对象思维和一般命令式编程的方法,能否完美的将两者结合起来完全得依靠编程人员的水准: 技能(任何人都能容易学会命令式编程) 模式(有些人用“模式-模式”,举个例子,模式可 ...
- Java [leetcode 20]Valid Parentheses
题目描述: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if th ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- HDU 5623KK's Number DP
题意:bc round 71 div 1 1003(有中文题面) 分析: 显然,每个人的策略就是都会拿剩下的数中最大的某几个数 假如我们用dp[i]表示当剩下i个数的时候先手得分-后手得分的最优值 那 ...
- google学术反向代理及IPV6免流量上网【教育网BUPT】
google反向代理 google https://awk.so/ 学术反向代理 https://awk.so/scholar/?hl=zh-CN 2015年1.1号开始流量计费,2元/G 无VPS用 ...
- 将COleDateTime类型数据转换成char *数据
用OpenCV做多摄像头校准时间,在图像上显示时间信息,需求要将COleDateTime类型数据转换成char *数据 具体代码如下: 1: COleDateTime m_checkDate; 2: ...
- asp.net 分析器错误消息: 文件.aspx.cs”不存在错误
发布webapplication时后老是报告分析器错误消息: 文件.aspx.cs”不存在错误,差点抓狂,后来在网上搜到原因是: <%@ Page Language="C#" ...
- OpenSSH 密钥管理:RSA/DSA 认证(转载)
我们中有许多人把优秀的 OpenSSH用作古老的 telnet 和 rsh 命令的替代品,OpenSSH 不仅是安全的而且是加密的. OpenSSH 更加吸引人的特性之一是它能够使用基于一对互补的数字 ...