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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
bootstrap table实例详解
Jan 06 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 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中数组的分组排序实例
2014/06/01 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
微信小程序时间选择插件使用详解
2018/12/28 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
keras中的History对象用法
2020/06/19 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
财务部岗位职责
2013/11/19 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
二手房购房意向书范本
2014/04/01 职场文书
工伤事故证明
2014/10/20 职场文书
刘胡兰观后感
2015/06/16 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电