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静态的动态
Sep 18 Javascript
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
javascript 必知必会之closure
Sep 21 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
angularJS提交表单(form)
Feb 09 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
JS实现简单九宫格抽奖
Jun 28 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
德劲1104的电路分析与改良
2021/03/01 无线电
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
详解vue 命名视图
2019/08/14 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
大专生的学习自我评价
2013/12/04 职场文书
社区服务活动总结
2014/05/07 职场文书
自荐信模板大全
2015/03/27 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
赡养老人协议书范本
2015/08/06 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫