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

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

 

如写出下面的代码

<a href="javascript:;" οnclick="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);" οnclick="javascript: testFunction(); return false;">test</a>

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

 

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

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

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值