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 相关文章推荐
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
ES6 十大特性简介
Dec 09 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
顶部缓冲下拉菜单导航特效的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类
2006/07/15 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php微信开发之关注事件
2018/06/14 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python 如何调用远程接口
2020/09/11 Python
python绘制趋势图的示例
2020/09/17 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
怎样写演讲稿
2014/01/04 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2016春节家属慰问信
2015/03/25 职场文书
校长新学期寄语2016
2015/12/04 职场文书
win10清理dns缓存
2022/04/19 数码科技
app场景下uniapp的扫码记录
2022/07/23 Java/Android