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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
JS正则表达式验证中文字符
May 08 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
JavaScript实现点击图片换背景
Nov 20 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中取得image按钮传递的name值
2006/10/09 PHP
关于时间计算的结总
2006/12/06 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php数组分页实现方法
2016/04/30 PHP
Yii核心验证器api详解
2016/11/23 PHP
php curl常用的5个经典例子
2017/01/20 PHP
jquery 插件学习(四)
2012/08/06 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Vue 修改网站图标的方法
2020/12/31 Vue.js
使用Python解析JSON数据的基本方法
2015/10/15 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
安全责任书范文
2014/03/12 职场文书
货车司机岗位职责
2014/03/18 职场文书
应届毕业生求职信
2014/05/26 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python