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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
js验证账户名是否重复
May 26 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
顶部缓冲下拉菜单导航特效的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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python版微信红包分配算法
2015/05/04 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
德国旅游网站:weg.de
2018/06/03 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
幼师求职自荐信
2014/05/31 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
化验员岗位职责
2015/02/14 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS