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 相关文章推荐
javascript之典型高阶函数应用介绍
Jan 10 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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模拟HTTP认证
2006/10/09 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python完全新手教程
2007/02/08 Python
Python随机生成彩票号码的方法
2015/03/05 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Django实现内容缓存实例方法
2020/06/30 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
酒店秘书求职信范文
2014/02/17 职场文书
高考学习决心书
2015/02/04 职场文书
会计专业自荐信范文
2019/05/22 职场文书