诡异的A标签

最新推荐文章于 2025-09-14 09:40:35 发布

原创最新推荐文章于 2025-09-14 09:40:35 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

本文深入探讨HTML中A标签的使用陷阱，包括this指向、javascript函数调用及事件顺序执行，通过实例揭示浏览器间差异。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>诡异的A标签</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script>
	//关于this
	function dododo(src){
		alert(src==window);
	}
	function hrefOrClick(val){
		alert(val);
	}
  </script>
 </head>
 <body>
  <a href="javascript:dododo(this)">dododo</a><br/>
  <a href="javascript:!function(){}">取个反试试</a>(注意浏览器之间的不同哦)<br/>
  <a href="javascript:hrefOrClick('href')" onclick="hrefOrClick('click')">猜猜先执行哪个?</a><br/>
 </body>
</html>

上文中一共三处A标签:
第一个在对href属性进行设置执行javascript函数时，这时会有个陷阱,当你传入this时，或得到的却是Window对象.
第二个A标签没太大意义，在IE,FF下执行时页面会跳转到空白，并且只有一个false,谷歌浏览器没反应,Opera没装，所以不知道，希望回帖者可以把结果奉上。
第三个只是为了告诉大家href标签属性和click事件的执行顺寻而已。

献丑了