javascript:void(0)的问题使用探讨


Posted in Javascript onApril 10, 2014

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 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 相关文章推荐
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
react-router中的属性详解
Jun 01 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 #Javascript
php的文件上传入门教程(实例讲解)
Apr 10 #Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 #Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 #Javascript
常见的原始JS选择器使用方法总结
Apr 09 #Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 #Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 #Javascript
You might like
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
django的csrf实现过程详解
2019/07/26 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
世界气象日活动总结
2015/02/27 职场文书