IE浏览器下表单提交按钮需要多次点击的问题

背景介绍

老总演示时发现IE无法上传文件，遂引起浏览器兼容性的血雨风波。在一番折腾后上传功能终于修缮完毕，但是却出现了一个奇怪的现象——IE下表单提交按钮需要点三下、点三下、点三下！我十分负责任地向上头解释：重要的事情要说三遍，所以重要的操作要点三下！

Bug1：.sumbit() 方法出现 Script5：拒绝访问

是他就是他！

搜索了一番此错误一般都是在跨域的情况下报的，然而在IE下通过.submit()方法提交表单或者通过脚本模拟点击submit按钮也会导致此错误。（反正诸如此类通过脚本的操作都不成功）

日常开发中情况是这样的：

在点击提交按钮后经过一系列业务逻辑判断（一堆if else），通过.submit()去提交表 单。嗯，我之前就是这样做的。

我的解决方案：

表单提交通过让用户亲自点击〈input type="submit"/>按钮，然后监听表单的submit事件做业务逻辑。

Bug2：IE下表单提交按钮需要点击多次才触发Submit事件

这是一个神奇的问题，在网上搜索了许久也没找到答案，索性自己摸索一下，得出个规律，你可以完成提交表单这个操作，只不过你要多点几次才能触发，n个上传操作就需要点击n+1次！

于是乎在解决这个问题之前只好我做了这样的提示。

让我们接着往下看，IE这个小婊砸到底做了什么？

从这张图中我们可以看到两个上传按钮模拟点击隐藏的file文件框，一个提交按钮用于提交表单。根据上面的经验在IE下我们需要点击三下才确认提交按钮会触发submit事件。那么这是为什么呢？

将隐藏的file文件框显示出来，并且可以获取到file文件框中的值

接着点击提交按钮

• 第一次点击：第一个文件框的文件路径没了，但是缩略图还在，js获取的路径也为空。
  
  

• 第二次点击：第二个文件框的文件路径也没了。
  

• 第三次点击：触发了submit事件开始提交！
  

上面的两次点击上传均是点击按钮然后通过js的click事件模拟点击文件框，出于安全问题这在IE下是不被允许的，但是我没搞明白后面点提交的两次操作为什么作用在了上面两个文件框上，虽然将文件框的value去掉了但是submit时还是可以获取到数据的，这是对我们不守规则的惩罚吗？

希望有大神能够指点一番 (￣︶￣)↗

总结

IE浏览器下请勿通过事件模拟用户对表单的操作，将文件框之类的覆盖在按钮上并修改透明度以获取用户的真实操作。

第一次发文，有不对的地方请大家多多指正，欢迎沟通讨论。