javascript:void(0)使用探讨


Posted in Javascript onAugust 27, 2013

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 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最简单的拖拽效果实现代码
Sep 24 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 #Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 #Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 #Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 #Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 #Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 #Javascript
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
js确认删除对话框效果的示例代码
2014/02/20 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
django的ORM操作 增加和查询
2019/07/26 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
Python中Qslider控件实操详解
2021/02/20 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
单位未婚证明范本
2014/01/18 职场文书
母校寄语大全
2014/04/10 职场文书
军训拉歌口号
2014/06/13 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
环保建议书范文
2015/09/14 职场文书
2015元旦感言
2015/12/09 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript