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 相关文章推荐
JSON 数据格式介绍
Jan 13 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
vue代码分割的实现(codesplit)
Nov 13 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
Protoss建筑一览
2020/03/14 星际争霸
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python实现数据库编程方法详解
2015/06/09 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
TensorFlow损失函数专题详解
2018/04/26 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
电台实习生求职信
2014/02/25 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
javascript Number 与 Math对象的介绍
2021/11/17 Javascript