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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
React-router4路由监听的实现
Aug 07 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python根据时间获取周数代码实例
2019/09/30 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
keras topN显示,自编写代码案例
2020/07/03 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
汽车工程专业应届生求职信
2013/10/19 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
使用pytorch实现线性回归
2021/04/11 Python