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 性能优化指南(2)
May 21 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 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
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python+django实现文件下载
2016/01/17 Python
Python 元类实例解析
2018/04/04 Python
利用python循环创建多个文件的方法
2018/10/25 Python
python实现flappy bird小游戏
2018/12/24 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
保险专业大专生求职信
2013/10/26 职场文书
求职简历的自我评价
2014/01/31 职场文书
《争吵》教学反思
2014/02/15 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
红色革命电影观后感
2015/06/18 职场文书
高一军训感想
2015/08/07 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python