onblur()导致循环调用

来源：互联网发布：野生程序员博客编辑：程序博客网时间：2024/05/17 06:26

1. 循环调动的出现

Onblur方法：控件失去焦点的时候调用

现在做个测试：两个输入框都定义了onblur方法，两个方法触发之后都会弹出一个对话框；然后另外一个对话框获得焦点。

如下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function testa(){alert('调用A输入框的Onblur()方法');var b = document.getElementById("txtSex");b.focus();} function testb(){alert("调用B输入框的Onblur()方法");var a = document.getElementById("txtName");a.focus();}</script></head><body>  <span>A:</span>      <input type="textbox" id="txtName" onblur="testa()" />  <br />  <span>B:</span>      <input type="textbox" id="txtSex" onblur="testb()" /></body></html>

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

于是完善一下上面的方法，在方法中加入ajax代码在进行测试

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function testa(){$.ajax({  type:"post",  url: 'onblur_test.action?timestamp='+new Date().getTime() ,  data: {},  //dataType: 'text',  success: function(strValue){    if(strValue=="0"){  alert('调用A输入框的Onblur()方法');var b = document.getElementById("txtSex");b.focus();  }  }});} function testb(){$.ajax({  type:"post",  url: 'onblur_test.action?timestamp='+new Date().getTime() ,  data: {},  success: function(strValue){    if(strValue=="0"){  alert('调用B输入框的Onblur()方法');var a = document.getElementById("txtName");a.focus();  }  }});}</script></head><body>  <span>A:</span>      <input type="textbox" id="txtName" onblur="testa()" />  <br />  <span>B:</span>      <input type="textbox" id="txtSex" onblur="testb()" /></body></html>

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

2. 解决方案

解决方案网上搜到了很多，有的是在方法中写一些弹出对话框的代码，这种做确实能够避免循环调用的出现。还有一个是将onblur方法改为onchange。

使用哪种方式还要根据实际情况来决定，我最终使用的是onchange() 方法，因为项目提示使用的弹出对话框，为了整体风格的统一我改变了方法。

简单的介绍一下onchange()方法，

Onchange方法：输入框失去焦点并且value改变之后触发。

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

所以从上面的情况我们可以得出这样子的一个结论，Onblur方法中如果有一些弹出框的时候不宜在同一个页面上使用过多。

3. 总结

这个是在做项目过程中遇到的一个小问题，但是却让我感触颇深，这两个方法都是一些很常用的方法，但是我对他们的熟悉度和适用情况还不是很熟悉。平时对于这些常用的知识应该注意多多注意和总结，不要因为自己觉得简单或者时候觉得网上有就不注意，不管是多么高深的知识其实都是这些小小的知识点一点点的积累起来的，平时多下下功夫就能够收获很多的。

0 0