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 相关文章推荐
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 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中批量替换文件名的实现代码
2011/07/20 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
JQuery toggle使用分析
2009/11/16 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
交通文明倡议书
2014/05/16 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
博士生导师推荐信
2014/07/08 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技