在Html中,<a/>标签表示超链接,它的href属性表示要跳转的地址。但是有时候我们想在单击某个连接的时候执行一个JavaScript函数或者一段JavaScript代码,这时就可以使用void搭配Js函数来实现。
1.href与void
在<a/>的href属性中使用"javascript:"加上想要执行的代码来达到点击执行Js代码的目的。但是当这些Js代码的最终返回值或对象不是undefined的话(函数的默认返回值是undefined),网页的内容会被替换成表示该返回值或对象的字符串(使用toString()转换)。(Chrome中不存在该现象。)因此要使用void来忽略函数返回的值或对象。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>voidTest.html</title>
<script type="text/javascript">
//测试函数,当单击链接的时候弹出信息
function voidTest()
{
alert("Test!");
return "From voidTest()"; //返回字符串
}
</script>
</head>
<body>
<!-- 期待的效果是单击链接弹出信息,不改变页面结构和内容 -->
<br>
<!-- 不使用void,点击后整个页面只有From voidTest()(Chrome不影响) -->
<a href="javascript:voidTest()">Without void!</a>
<br> <br>
<!-- 使用void,点击后页面内容不改变 -->
<a href="javascript:void voidTest()">With void!</a>
<br> <br>
<!-- 也可以加括号 -->
<a href="javascript:void(voidTest())">With void()!</a>
</body>
</html>
2.href、onclick与void
当我们希望单击链接的时候执行一些Js函数,并且希望由链接的click事件触发,这个时候也要使用void来阻止超链接的跳转。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>voidTest.html</title>
<script type="text/javascript">
//测试函数,当单击链接的时候弹出信息
function voidTest()
{
alert("Test!");
}
</script>
</head>
<body>
<!-- 期待的效果是单击链接弹出信息 -->
<!-- 不加href,<a/>显示成普通文字而不是超链接,onclick事件无法触发 -->
<a οnclick="voidTest">Without href!</a>
<br><br>
<!-- 添加空的href属性,点击时会重载该页面 -->
<a href="" οnclick="voidTest">With empty href!</a>
<br><br>
<!-- href属性为void,正常 -->
<a href="javascript:void" οnclick="voidTest()">With javascript:void in href!</a>
<br><br>
<!-- href属性为void(0),正常 -->
<a href="javascript:void(0)" οnclick="voidTest()">With javascript:void(0) in href!</a>
</body>
</html>