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 Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
基于ssm框架实现layui分页效果
Jul 27 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 Socket网络操作类定义与用法示例
2017/08/30 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python的re模块正则表达式操作
2016/05/25 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
大学生旷课检讨书
2014/01/22 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
组织鉴定材料
2014/06/02 职场文书
写给领导的感谢信
2015/01/22 职场文书
大学生自荐信范文
2015/03/05 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL