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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
AngularJS中的promise用法分析
May 19 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 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
杏林同学录(五)
2006/10/09 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
js调用css属性写法
2013/09/21 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
Vue中使用canvas方法总结
2019/02/12 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
深入源码解析Python中的对象与类型
2015/12/11 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python学习入门之区块链详解
2017/07/25 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python扩展内置类型详解
2018/03/26 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
python 获取计算机的网卡信息
2021/02/18 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
实习自我鉴定范文
2013/10/30 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
人事专员岗位说明书
2014/07/29 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
Python图像处理之图像拼接
2021/04/28 Python
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技