javascript:void(0)使用探讨


Posted in Javascript onAugust 27, 2013

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 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 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
vue2单元测试环境搭建
May 24 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 #Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 #Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 #Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 #Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 #Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 #Javascript
You might like
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python中的类与类型示例详解
2019/07/10 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python 串行执行和并行执行实例
2020/04/30 Python
浅谈django 重载str 方法
2020/05/19 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
2014年社区工作总结
2014/11/18 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
庆七一主持词
2015/06/29 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
《藏戏》教学反思
2016/02/23 职场文书
品德与社会教学反思
2016/02/24 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android