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 相关文章推荐
Javascript MD4
Dec 20 Javascript
根据分辩率调用不同的CSS.
Jan 08 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
Angular2中监听数据更新的方法
Aug 31 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中加密解密DES类的简单使用方法示例
2020/03/26 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python 运算符 供重载参考
2009/06/11 Python
Python 文件操作实现代码
2009/10/07 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
database面试题
2013/03/28 面试题
vue实现倒计时功能
2021/03/24 Vue.js
军训学生自我鉴定
2014/02/12 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
商务信函英语问候语
2015/11/10 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python