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 相关文章推荐
简明json介绍
Sep 28 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
canvas红包照片实例分享
Feb 28 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
深入理解node.js之path模块
May 03 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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(1)
2006/10/09 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JS实现简易计算器
2020/02/14 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python获取代理IP的实例分享
2018/05/07 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Django 用户认证组件使用详解
2019/07/23 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
竞争上岗演讲稿
2014/01/05 职场文书
小学语文教研活动总结
2014/07/01 职场文书
早读课迟到检讨书
2014/09/25 职场文书
离婚协议书范文
2015/01/26 职场文书
时尚女魔头观后感
2015/06/04 职场文书
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript