关于IE6下A标签提交表单，引发事件冲突的问题 -

yuming.xiao

浏览: 19782 次
性别:
来自: 宁波

最近访客更多访客>>

zhaoas01

45820894

herb_16

ITMI

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

关于IE6下A标签提交表单，引发事件冲突的问题

博客分类：

Web前端

我们都知道可以使用 [form].submit(); 来动态提交表单, 但使用点击<a>标签来提交表单, 会出现什么情况呢? 我们都知道,<a>有个链接属性 href, 而form也有一个页面请求属性 action,当两属性同时存在时，点击<a>当然会优先<a>的href链接。

但如果是<a href=”javascript:void(0);”></a>时，又会是什么情况呢? 实践证明IE7.0+ , FF3.0+, Opera9.6+ 均能正确处理, 忽略<a/>的href, 执行表单的submit动作, 唯有 IE6 仍坚持着自己的原则, 只要有 href , 就只尝试执行链接 href , 除非你的<a/>标签中去掉 href属性, 但去掉 href 你将发现IE 下将不会出现下划线...

为解决这个问题，一下是测试代码：你可以拷贝自己电脑，新建一个HTML页面自己看下他们的区别：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>慎用A标签提交表单 IE6事件冲突问题</title>
</head>
<p>
<h4>IE6下的代码测试：</h4>
<form method='get'  action="www.baidu.com">
<input value='' name='kw'/>
</form>
<a id="IE6submit" style="color:#333" >IE6提交</a>
</p>
<p>
<h4>IE7下的代码测试：</h4>
<form method='get' action="www.google.cn">
<input value='' name='kw1'/>
</form>
<a id="IE7submit" href="javascript:void(0);" style="color:#333" >IE7提交</a>
</p>

<script type="text/javascript">
document.getElementById('IE6submit').onclick = function(){
document.forms[0].submit();
}
document.getElementById("IE7submit").onclick=function(){
document.forms[1].submit();
}
</script>
</head>
<body>

分享到：