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 Ajax 实例全解析
Apr 20 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
js跑步算法的实现代码
Dec 04 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
JS实现简易图片自动轮播
Oct 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 如何获取二维数组中某个key的集合
2014/06/03 PHP
php获取系统变量方法小结
2015/05/29 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
JavaScript中的类继承
2010/11/25 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
Python 深入理解yield
2008/09/06 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python匿名函数用法实例分析
2019/08/03 Python
django之自定义软删除Model的方法
2019/08/14 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Python的in,is和id函数代码实例
2020/04/18 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
大专生的学习自我评价
2013/12/04 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
公司薪酬管理制度
2014/01/31 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
前台文员岗位职责
2015/02/04 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书