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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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之PHP语法学习笔记1
2006/12/17 PHP
php str_pad 函数使用详解
2009/01/13 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JS获取农历日期具体实例
2013/11/14 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
详解Python3中yield生成器的用法
2015/08/20 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python读取YAML文件过程详解
2019/12/30 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
售后服务承诺书模板
2014/05/21 职场文书
中考标语大全
2014/06/05 职场文书
积极向上的团队口号
2014/06/06 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
部队2015年终工作总结
2015/04/02 职场文书
分家协议书范本
2016/03/22 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android