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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
javascript判断office版本示例
Apr 11 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
代码分析vue中如何配置less
Sep 28 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 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
php mysql索引问题
2008/06/07 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python中的ctime()方法使用教程
2015/05/22 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python random模块用法解析及简单示例
2017/12/18 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
Java程序员面试题
2016/09/27 面试题
门卫人员岗位职责
2013/12/24 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
校长创先争优承诺书
2014/08/30 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript