HTML 中各浏览器对A标签中javascript的支持研究

最近做一个项目要求javascript对多浏览器支持,但是页面中有较多的使用A标签，于是就出现了下面的问题

 

如写出下面的代码

<a href="javascript:;" onclick="testFunction()">测试</a>

对于上面的代码，各个浏览器的支持分别为：

 

IE6/IE7:  会执行onclick中的javascript方法，但同时也会执行href中的javascript方法,于是，如果你在onclick方法中提交了表单，那么就会出现表单提交了，但是页面没有跳转的问题！

 

IE8:  和 前两个版本IE一样，href中的javascript方法会执行,同时onclick方法也会执行，但是不同点是如果onclick中提交了表单，页面可以跳转

 

firefox和webkit浏览器:这两个浏览对于上面的A标签执行的方式和IE8是一样！

 

针对上面的问题，其实是由于上面的A标签中使用的javascript语法不正确所致

 

对于上面的A标签，IE6和IE7中会先执行href然后再执行onclick，所以按上面的语法就会变成先执行了javascript: ;这个方面，IE6会认为是页面刷新了！所以当onclick方法中有跳转时，方法执行完后不会跳转，因为前面的javascript: ;相当于已经让浏览器跳转了一次页面，所以无法执行跳转！

 

针对上面的解决方法可以用下面的方式

 

<a href="javascript:void(0);" onclick="javascript: testFunction(); return false;">test</a>

这种是目前来说最标准的写法

 

不过这样写代码又确实有点长了，所以也可以写成下面的比较懒的写法

<a href="#" onclick="javascript: testFunction(); return false;">test</a>

 

最关键是要在onclick中reutnr false;告诉浏览器不要去执行A标签中的href方法