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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
JavaScript 特殊字符
2007/04/05 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
vuex vue简单使用知识点总结
2019/08/29 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python查看微信撤回消息代码
2018/06/07 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
高中校园广播稿
2014/01/11 职场文书
销售冠军获奖感言
2014/02/03 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
英语演讲开场白
2015/05/29 职场文书
运动会加油稿
2015/07/22 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python