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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
javascript获取当前ip的代码
2009/05/10 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python实现基于POS算法的区块链
2018/08/07 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python循环实现n的全排列功能
2019/09/16 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
python批量修改文件名的示例
2020/09/27 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
元旦晚会邀请函
2014/02/01 职场文书
学校联谊活动方案
2014/02/15 职场文书
竞争上岗实施方案
2014/03/21 职场文书
专业技术职务聘任书
2014/03/29 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书