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 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
如何利用React实现图片识别App
Feb 18 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实现mysql封装类示例
2014/05/07 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
VueJS全面解析
2016/11/10 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python绘图方法实例入门
2015/05/19 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
员工年终演讲稿
2014/01/03 职场文书
爱国口号
2014/06/19 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
宾馆安全管理制度
2015/08/06 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技