javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别


Posted in Javascript onNovember 13, 2015

Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下:

1. javascript:void (expression)

2. javascript:void expression

expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的,但是写上去是一个好习惯。

你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。

示例-点击超链接不跳转

1:<a href="####"></a>

2:<a href="javascript:void(0)"></a>

3:<a href="javascript:void(null)"></a>

4:<a href="#" onclick="return false"></a>

点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP(实际测试发现 滚动条会滚到顶端)而以上四种方法仅仅表示一个死链接都表示是一个死链接不会跳转也不会返回到顶部.

示例-为什么location.href不自动跳转?

<a href="javascript:void(0)" onclick="delete('123')">删除</a>
function delete(id){
 if(confirm("确实要删除[为什么location.href不自动跳转?]吗?")) {
  location.href="/delete.jsp?id=" + id;
 }
}

以上代码不管如何检查都没有任何问题,而location.href="/delete.jsp?id=" + id;在别的地方都好使,为什么这段代码就行呢?

原因是那个void(0)把代码改成:

<a href="javascript:delete('123')">删除</a>function delete(id) {
 if(confirm("确实要删除[为什么location.href不自动跳转?]吗?")) {
  location.href="/delete.jsp?id=" + id;
 }
}

我们发现,页面立即就跳转了,能正常删除相应的数据.为什么呢?

因为void是一个操作符,会计算一个表达式,但不会返回值,当然也不会改变当前页面的任何内容,也就不会正常的跳转.

说明

void 运算符对表达式求值,并返回 undefined。在希望求表达式的值,但又不希望脚本的剩余部分看见这个结果时,该运算符最有用。

链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“#”。为防止点击链接后跳转到页首,onclick 事件 return false即可。

PS:href=#与href=javascriptvoid(0)的区别

#"包含了一个位置信息 
默认的锚点是#top 也就是网页的上端
而javascript:void(0)  仅仅表示一个死链接 
这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首
而javascript:void(0)
则不是如此 所以调用脚本的时候最好用void(0)
或者<input onclick> <div onclick>等 

打开新窗口链接的几种办法

1.window.open('url')

2.用自定义函数       

<script>   
function openWin(tag,obj)   
{    
obj.target="_blank";    
obj.href = "Web/Substation/Substation.aspx?stationno="+tag;    
obj.click();   
}   
</script> 
<a href="javascript:void(0)" onclick="openWin(3,this)">LINK_TEST</a> 
window.location.href=""

-------------------------------------------------------------------------------  

如果是个# ,就会出现跳到顶部的情况,个人收藏的几种解决方法:

1:<a href="####"></a> 
2:<a href="javascript:void(0)"></a>
3:<a href="javascript:void(null)"></a>
4:<a href="#" onclick="return false"></a> 
5:<span style="cursor:hand"></span>(好像在FF中不能显示)

-------------------------------------------------------------------------------

以上内容是小编给大家介绍的javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别,希望对大家有所帮助。

Javascript 相关文章推荐
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
纯js简单日历实现代码
Oct 05 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 #Javascript
有关Promises异步问题详解
Nov 13 #Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 #Javascript
Jquery promise实现一张一张加载图片
Nov 13 #Javascript
jquery转盘抽奖功能实现
Nov 13 #Javascript
javascript生成随机数方法汇总
Nov 12 #Javascript
js正则表达式验证邮件地址
Nov 12 #Javascript
You might like
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
js操作select控件的几种方法
2010/06/02 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
javascript中this指向详解
2016/04/23 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
原生js实现验证码功能
2017/03/16 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
python实现媒体播放器功能
2018/02/11 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
《理想》教学反思
2014/02/17 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
大学生自荐材料范文
2014/12/30 职场文书
节水倡议书
2015/01/19 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
阿里云日志过滤器配置日志服务
2022/04/09 Servers