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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
js数组的操作详解
Mar 27 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
手把手教你从零开始react+antd搭建项目
Jun 03 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
Jquery异步请求数据实例代码
2011/12/28 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
店长岗位的工作内容
2013/11/12 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
表彰先进的通报
2014/01/31 职场文书
就业意向书范文
2014/04/01 职场文书
合作协议书格式
2014/08/19 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
部队2014年终工作总结
2014/11/27 职场文书
升学宴来宾致辞
2015/07/27 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers