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 相关文章推荐
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
关于微信小程序登录的那些事
Jan 08 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 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爆绝对路径方法收集整理
2012/09/17 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
laravel请求参数校验方法
2019/10/10 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
Ionic快速安装教程
2016/06/03 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
解决python 上传图片限制格式问题
2019/10/30 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
修理厂厂长岗位职责
2014/01/30 职场文书
爱情保证书大全
2014/04/29 职场文书
初中班级口号
2014/06/09 职场文书
工作作风承诺书
2014/08/30 职场文书
Python基础之条件语句详解
2021/06/16 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记