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 高亮显示文本中重要的关键字
Dec 24 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python 日期排序的实例代码
2019/07/11 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
优秀广告词大全
2014/03/19 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
初中中等生评语
2014/12/29 职场文书
Django实现聊天机器人
2021/05/31 Python