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插件
Nov 24 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 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
对javascript和select部件的结合运用
2006/10/09 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php删除指定目录的方法
2015/04/03 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
小小聊天室Python代码实现
2016/08/17 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
详解Django中异步任务之django-celery
2020/11/05 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
Araks官网:纽约内衣品牌
2020/10/15 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
小班上学期幼儿评语
2014/12/30 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
怒海潜将观后感
2015/06/11 职场文书
2016年感恩节寄语
2015/12/07 职场文书