日期:2014-05-16  浏览次数:20298 次

一个由于浏览器引起的js问题

今天同事反映了一个奇怪的bug:
他在一个校验表单也出现一个bug,当验证手机格式不正确时,会弹出提示“格式不正确”,当点击确定按钮关闭提示框后,自动在输入框里填入当前的url, 我们预期应该是只弹出一个提示框的,但是出现修改输入框的值出乎我们意料。而且这个情况只是偶尔出现,大部分时间是正常的,只是在弹出输入框慢时出现这样 的情况。
我们在代码里查了半天,没有找到对这个输入框赋值的地方。

于是我们逐个代码注释,发现当不弹出对话框时,就没有这样的问题,我们都在想“弹出对话框为什么会引起给输入框赋值呢?”
当我移动鼠标到提交按钮上时,发现按钮是一个a标签,并且链接和输入框被修改的值一样,我忽然想到了,我们刚才提交的动作有点像拖拽:点击完提交后,马上弹出提示框,然后点击提示框确定按钮,这个中间时间非常短,而且提示框确定按钮的位置正好在输入框的正上面!

于是我又试了几次,点击提交后,等提示框弹出后几分钟再点击“确定”,结果再也没有发生这样的问题了。
导致出现这样的bug的原因是firefox,连续点击a标签和点击弹出框确定按钮,时间间隔很短时,它会认为这个是一个拖拽事件,把a的href赋给了弹出框确定按钮底下的输入框。
我把a标签改为<span>标签包裹一个<img>标签,但是还是有一样的问题,输入框里出现了img的jpg链接,但是这个验证了我的想法。
于是我把img标签去掉,使用div代替,把img加在div的背景里,最后测试完全没有问题,这个是因为div是无法拖拽的。

原文:http://www.software8.co/wzjs/Javascript/4770.html