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,超强推荐share.js
Dec 23 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python解析xml模块封装代码
2014/02/07 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python读大数据txt
2016/03/28 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python suds访问webservice服务实现
2020/06/26 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
业务经理岗位职责
2013/11/11 职场文书
渡河少年教学反思
2014/02/12 职场文书
2014年平安夜寄语
2014/12/08 职场文书
党内外群众意见范文
2015/06/02 职场文书
结婚典礼主持词
2015/06/29 职场文书
学校运动会通讯稿
2015/07/18 职场文书
感恩教师主题班会
2015/08/12 职场文书
新党员入党决心书
2015/09/22 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python