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对象及属性
Feb 13 Javascript
javascript add event remove event
Apr 07 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 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一些有意思的小区别
2006/12/06 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python中反射和描述器总结
2018/09/23 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python如何对XML 解析
2020/06/28 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
模具专业推荐信
2013/10/30 职场文书
大学生演讲稿
2014/04/25 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
校车司机安全责任书
2015/05/11 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技