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 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python中turtle作图示例
2017/11/15 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
人力资源管理专业学生自我评价
2013/11/20 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
继承公证书
2014/04/09 职场文书
节约用水的口号
2014/06/20 职场文书
校园安全教育心得体会
2016/01/15 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
python接口测试返回数据为字典取值方式
2022/02/12 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers