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 相关文章推荐
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
VuePress 中如何增加用户登录功能
Nov 29 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
php计算函数执行时间的方法
2015/03/20 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python 表格打印代码实例解析
2019/10/12 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
EJB的基本架构
2016/09/22 面试题
公司董事长职责
2013/12/12 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
火车来了教学反思
2014/02/11 职场文书
节水标语大全
2014/06/11 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
超市开店计划书
2014/09/15 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
绿色环保倡议书
2015/04/28 职场文书
基层组织建设年活动总结
2015/05/09 职场文书