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 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
JavaScript创建表格的方法
Apr 13 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
4.与数据库的连接
2006/10/09 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
法学院毕业生求职信
2014/06/25 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL