void与

在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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章