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

相关文章

  • 记录微信小程序 height: calc(xx - xx);无效问题

    记录微信小程序 height: calc(xx - xx);无效问题

    这篇文章主要介绍了微信小程序 - height: calc(xx - xx);无效 问题,文中给大家扩展介绍下jquery点击添加样式,再次点击移除样式的实例代码,需要的朋友可以参考下
    2019-12-12
  • 原生js实现页面滚动动画

    原生js实现页面滚动动画

    这篇文章主要为大家详细介绍了原生js实现页面滚动动画,使用了requestAnimationFrame,文中示例代码介绍的非常详细,具有一定的参考价值,感为兴趣的小伙伴们可以参考一下
    2022-01-01
  • JavaScript实现单点登录的示例

    JavaScript实现单点登录的示例

    这篇文章主要介绍了JavaScript实现单点登录的示例,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • JS基于clipBoard.js插件实现剪切、复制、粘贴

    JS基于clipBoard.js插件实现剪切、复制、粘贴

    这篇文章主要介绍了JS实现剪切、复制、粘贴——clipBoard.js 的相关资料,需要的朋友可以参考下
    2016-05-05
  • 用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数

    用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数

    用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数 函数的参数:elem元素、页面主体宽度(如:990、950宽)、elem与页面主体DIV的左边距
    2012-01-01
  • chatGPT教我写compose函数的详细过程

    chatGPT教我写compose函数的详细过程

    这篇文章主要介绍了chatGPT教我写compose函数,文中给大家介绍了chatGPT过程概略,本文结合实例代码图文给大家讲解的非常详细,需要的朋友可以参考下
    2023-02-02
  • JS实现的走迷宫小游戏完整实例

    JS实现的走迷宫小游戏完整实例

    这篇文章主要介绍了JS实现的走迷宫小游戏,涉及javascript键盘事件响应及页面元素动态变换相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • js中最容易被忽视的事件问题大总结

    js中最容易被忽视的事件问题大总结

    下面小编就为大家带来一篇js中最容易被忽视的事件问题大总结。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-05-05
  • 判断JavaScript对象是否可用的最正确方法分析

    判断JavaScript对象是否可用的最正确方法分析

    在调试JavaScript的过程中,你是不是经常会遇到object undefined的问题呢?你平时是怎样来测试对象是否存在呢?判断浏览器版本?判断JavaScript版本?本文来告诉你正确的方法。这篇文章涉及的浏览器可能古老一些,但是阐述的道理确实适合现在使用的。
    2008-10-10
  • JavaScript 自定义事件之我见

    JavaScript 自定义事件之我见

    事件就是用户和浏览器交互的一种途径,在本例中我们的代码逻辑一般就是收集用户填写信息,验证信息合法性,利用AJAX与服务器交互,需要的朋友可以参考下
    2017-09-09

最新评论