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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
解决vuex刷新数据消失问题
Nov 12 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基于session实现数据库交互的类实例
2015/08/03 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Python中获取对象信息的方法
2015/04/27 Python
python安装与使用redis的方法
2016/04/19 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python语言描述随机梯度下降法
2018/01/04 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
毕业生自荐信格式
2014/03/07 职场文书
企业承诺书格式
2014/05/21 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫