使用javascript:void(0)的作用及示例介绍

编辑:逐风博客 2015-06-17 00:00:00 阅读热度:0
        在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,我们可以使用javascript:void(0),下面是具体的使用方法,感兴趣的朋友可以参考下
        在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,或者是跳到设置的锚点的地方,用户体验不好。 
通常的用法为:
<a href="javascript:void(0)">单击此处看看效果</a> 
实际上单击此处什么也不会发生,其中的javascript:void(0);形式是一个javascript的伪协议,是表示此链接不跳转到任何的地方。 

用到javascript:void(0)的情况主要形式有以下几种: 
//点击链接后不做任何事情 
<a href="javascript:void(0);" >test</a> 
<a href="javascript:;" >test</a> 
<a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等其他的
//点击链接后,响应用户自定义的点击事件 
<a href="javascript:void(0)" onclick="doSomething()">test</a> 
void 操作符用法格式如下: 
#第一种写法:
javascript:void (expression) 
#第二种写法:
javascript:void expression 
expression是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。 
也就是说,要执行某些处理,但是不整体刷新页面的情况下,可以使用void(0),但是在需要对页面进行refresh的情况下,那就要仔细了。 

在调用自这自定义的JS函数时,如果我们使用
<a href="#" onclick="method;">click</a>
时,虽然方法可以执行,但是如果页面含有滚动条,会自动滚动到页面的顶端,如果这个时候我们使用
<a href="javascript:void(0); onclick="method;">click</a>
执行时,页面将不会发生滚动,这个对于图片切换、AJAX调用 应该非常有用.
Javascript(Js)保留小数点后面2位小数的三种方法
深入理解JavaScript定时机制
逐风开发在线 逐风

懒惰:是这样一种品质,它使得你花大力气去避免消耗过多的精力。它敦促你写出节省体力的程序,同时别人也能利用它们。为此你会写出完善的文档,以免别人问你太多问题。