javascript:void(0)的问题使用探讨


Posted in Javascript onApril 10, 2014

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

目前有如下几种解决办法:
1)点击链接后不做任何事情

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

2)点击链接后,响应用户自定义的点击事件
<a href="javascript:void(0)" onclick="doSomething()">test</a> 
<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href="" 
<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 操作符用法格式如下:
javascript:void (expression) 
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,所以会出现这种情况。

Javascript 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
整理一下常见的IE错误
Nov 18 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 #Javascript
php的文件上传入门教程(实例讲解)
Apr 10 #Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 #Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 #Javascript
常见的原始JS选择器使用方法总结
Apr 09 #Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 #Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 #Javascript
You might like
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python遍历目录的方法小结
2016/04/28 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python join方法使用详解
2019/07/30 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
白酒业务员岗位职责
2013/12/27 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
Django中celery的使用项目实例
2022/07/07 Python
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers