javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

 更新时间:2015年11月13日 10:04:31   投稿:mrr  
Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值,本文给大家介绍javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别,需要的朋友参考下

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)的区别,希望对大家有所帮助。

相关文章

  • 微信小程序iBeacon测距及稳定程序的实现解析

    微信小程序iBeacon测距及稳定程序的实现解析

    这篇文章主要介绍了微信小程序iBeacon测距及稳定程序的实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JS实现1000以内被3或5整除的数字之和

    JS实现1000以内被3或5整除的数字之和

    今天在技术群里看到一道这样的提:求1000以内被3或5整除的数字之和。小编把我的解决办法分享到脚本之家平台,供大家参考
    2016-02-02
  • JavaScript Event学习第八章 事件的顺序

    JavaScript Event学习第八章 事件的顺序

    在第一章中我提到一个初次看起来可能不是那么好理解的是一个问题:“如果一个元素和他的父元素对于同样的事件都有事件处理程序,那么哪个会首先执行呢?”毫无疑问,看是什么浏览器。
    2010-02-02
  • JavaScript空数组的every()方法实践

    JavaScript空数组的every()方法实践

    every()方法用于检测数组中的所有元素是否都满足指定条件, 本文主要介绍了JavaScript空数组的every()方法实践,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • JavaScipt选取文档元素的方法(推荐)

    JavaScipt选取文档元素的方法(推荐)

    下面小编就为大家带来一篇JavaScipt选取文档元素的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript模块化简单解析

    javascript模块化简单解析

    这篇文章主要针对javascript模块化为大家进行简单解析,如何写一个模块,在页面中加载模块的方法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 设置和读取cookie的javascript代码

    设置和读取cookie的javascript代码

    设置和读取cookie的javascript代码...
    2007-07-07
  • js实现带搜索功能的下拉框

    js实现带搜索功能的下拉框

    这篇文章主要为大家详细介绍了js实现到搜索的下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 微信小程序五星评分效果实现代码

    微信小程序五星评分效果实现代码

    这篇文章主要介绍了微信小程序五星评分效果实现代码的相关资料,需要的朋友可以参考下
    2017-04-04
  • JS生成和下载二维码的代码

    JS生成和下载二维码的代码

    本文给大家分享一段js代码关于生成和下载二维码功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-12-12

最新评论