万恶IE兼容之input change事件
2017-12-29 15:21
127 查看
在做多文件上传时,给input添加change事件,触发AJAX请求,通过formdata进行上传,直到这里都比较中规中矩,高高兴兴获取dom,绑上事件,在chrome,firefox等完美运行~ 结果上午刚弄好,下午测试提bug,上传文件有问题,跑过去一看,原来是上传进度条读满以后,该弹层傲娇矗立,坚挺不退,根据表现定位问题到弹层的打开上,打上两个断点,chrome和IE 双开运行。
果然,chrome小乖乖听话,跑一圈老实听话回家,IE这狗贼,跑完一遍不愿回家,野驴一样又溜了一圈,结果就导致了上传成功关闭弹层后又打开了,且因上传已成功后被我阻断进程,就滞留了下来。
为啥会跑两次呢,原来IE中给input加change事件会被js的操作给触发,而多文件上传时在上传成功后置空了input的值,该操作被认为input值发生了改变,导致change再次触发,知道了原因 接下来就好办了。首先,置空操作干掉,通过删除节点再添加模拟置空,避掉了ie的鬼规矩,另外不要忘了动态添加节点普通绑定事件不可用,我这里用的JQ,用on方法进行事件绑定。至此,两个孩子一起高高兴兴出门,同时快快乐乐回家,完美~
果然,chrome小乖乖听话,跑一圈老实听话回家,IE这狗贼,跑完一遍不愿回家,野驴一样又溜了一圈,结果就导致了上传成功关闭弹层后又打开了,且因上传已成功后被我阻断进程,就滞留了下来。
为啥会跑两次呢,原来IE中给input加change事件会被js的操作给触发,而多文件上传时在上传成功后置空了input的值,该操作被认为input值发生了改变,导致change再次触发,知道了原因 接下来就好办了。首先,置空操作干掉,通过删除节点再添加模拟置空,避掉了ie的鬼规矩,另外不要忘了动态添加节点普通绑定事件不可用,我这里用的JQ,用on方法进行事件绑定。至此,两个孩子一起高高兴兴出门,同时快快乐乐回家,完美~
相关文章推荐
- 两个INPUT同步输入的方法小结 兼容IE和firefox
- 兼容Firefox和IE的onpropertychange事件oninput
- pc手机&姓名&地址验证&input提示文案兼容ie
- 两个INPUT同步输入的方法小结 兼容IE和firefox
- 监听输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等
- form input file 图片上传360IE兼容问题
- input的width和padding-left同时存在时IE兼容问题
- 即时获取input输入框里的内容 IE/非IE皆可兼容
- jquery input placeholder支持兼容ie7,ie8
- input file 控制上传文件的大小和格式(兼容ie)
- input 按钮在IE下兼容问题
- input 标签(file类型)在IE和FF里的兼容问题
- input的width和padding-left同时存在时IE兼容问题
- 实时监听输入框值变化的完美方案(兼容ie):oninput & onpropertychange
- 上传图片 ajax input type="file" 兼容 ie chroem 火狐
- 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
- javascript 添加 移除 input标签 兼容IE FIREFOX
- 兼容Firefox和IE的onpropertychange事件oninput
- input 标签(file类型)在IE和FF里的兼容问题
- 兼容Firefox和IE的onpropertychange事件oninput