Onblur,onfoucs死循环问题解析与解决方案

Onblur方法:控件失去焦点的时候调用
现在做个测试:两个输入框都定义了onblur方法,两个方法触发之后都会弹出一个对话框;然后另外一个对话框获得焦点。
如下面的代码:
[html] view plain copy print?




Insert title here



A:



B:


在不同的浏览器上测试之后的结果发现并没有出现循环调用的情况。但是在项目中我们确实越到了这种情况。于是就开始思考是不是仅仅依靠onblur和focus方法并不能出现循环调用的情况。再一次查看我们写的代码发现我们在onblur方法中还是用ajax。于是就开始猜测是不是因为ajax的而使得出现循环调用。
于是完善一下上面的方法,在方法中加入ajax代码在进行测试
[html] view plain copy print?




Insert title here



A:



B:


测试之后的结果发现出现了循环调用,所以可以得出结论onblur出现循环调用其实是有条件的,ajax的异步执行再加上onblur失去焦点的事件确实很容易出现循环调用。

2. 解决方案

解决方案网上搜到了很多,有的是在方法中写一些弹出对话框的代码,这种做确实能够避免循环调用的出现。还有一个是将onblur方法改为onchange。
使用哪种方式还要根据实际情况来决定,我最终使用的是onchange() 方法,因为项目提示使用的弹出对话框,为了整体风格的统一我改变了方法。

简单的介绍一下onchange()方法,
Onchange方法:输入框失去焦点并且value改变之后触发。
从上面的定义可以看出触发Onchange方法需要满足两个条件,value值改变并且输入框失去焦点。这样子在ajax执行过程中如果value值没有改变而且输入框没有失去焦点是不会触发这个事件的, 这样子就不容易出现循环调用的情况。

发表评论