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 For Beginners(转载)
Jan 05 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
js自定义select下拉框美化特效
May 12 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
监听element-ui table滚动事件的方法
Mar 26 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 array_push 数组函数
2009/12/26 PHP
php生成略缩图代码
2012/07/16 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
Smarty变量用法详解
2016/05/11 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python开根号实例讲解
2020/08/30 Python
为什么要做架构设计
2015/07/08 面试题
测试工程师岗位职责
2013/11/28 职场文书
大学生创业策划书
2014/02/02 职场文书
离婚协议书格式
2014/11/21 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
爱心捐款感谢信
2015/01/20 职场文书
入党申请书怎么写?
2019/06/21 职场文书
导游词之张家界
2019/10/31 职场文书