onblur()によるループ呼び出し
3031 ワード
1.循環異動の出現
Onblurメソッド:コントロールがフォーカスを失ったときに呼び出されます
2つの入力ボックスにonblurメソッドが定義されており、2つのメソッドがトリガーされるとダイアログボックスがポップアップされます.次に、別のダイアログボックスでフォーカスを取得します.
次のコードに従います.
Insert title here
function testa()
{
alert(' A Onblur() ');
var b = document.getElementById("txtSex");
b.focus();
}
function testb(){
alert(" B Onblur() ");
var a = document.getElementById("txtName");
a.focus();
}
A:
B:
異なるブラウザでテストした結果、ループ呼び出しは発生しなかったことがわかりました.しかし、プロジェクトでは確かにこのような状況に達しました.そこでonblurとfocusメソッドだけではループ呼び出しが起こらないのではないかと考え始めた.私たちが書いたコードをもう一度見てみると、onblurメソッドでajaxを使用していることがわかります.そこでajaxのためにループ呼び出しが発生したのではないかと推測し始めた.
そこで上記の方法を改善し、方法にajaxコードを加えてテストを行います.
Insert title here
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();
}
}
});
}
A:
B:
テストの結果、ループ呼び出しが発生していることが分かったので、onblurのループ呼び出しが発生するのは実は条件があり、ajaxの非同期実行に加えてonblurが焦点を失ったイベントは確かにループ呼び出しが発生しやすいと結論した.
2.ソリューション
ソリューションはネット上で多く検索され、方法にポップアップダイアログのコードを書くことで、ループ呼び出しの発生を確実に回避することができます.もう一つはonblurメソッドをonchangeに変更することです.
どのような方法を使うかは実際の状況によって決めなければなりませんが、私が最終的に使ったのはonchange()方法で、プロジェクトのヒントが使うポップアップダイアログボックスのため、全体のスタイルの統一のために方法を変えました.
onchange()の方法を簡単に紹介しますが、
Onchangeメソッド:入力ボックスがフォーカスを失い、valueが変更された後にトリガーされます.
上記の定義から、Onchangeメソッドをトリガするには、value値が変更され、入力ボックスがフォーカスを失う2つの条件を満たす必要があることがわかります.このようにajax実行中にvalue値が変更されず、入力ボックスがフォーカスを失っていない場合、このイベントはトリガーされません.これにより、ループ呼び出しは容易に発生しません.
上記の状況から、Onblurメソッドにポップアップボックスがある場合は、同じページであまり使用しないほうがいいという結論が得られます.
3.まとめ
これはプロジェクトをする過程で出会った小さな問題ですが、私に深く感じさせて、この2つの方法はすべていくつかのよく使われる方法ですが、私は彼らの熟知度と適用状況についてまだよく知られていません.ふだんこれらのよく使う知识に対して多く注意して総括するべきで、自分が简単だと感じますためあるいは时にネット上で注意しないでください、どんなに深い知识に関わらず実はすべてこれらの小さい知识の点の少しの积み重ねたので、ふだん多く功夫をおりて多く収获することができます.
Insert title here
function testa()
{
alert(' A Onblur() ');
var b = document.getElementById("txtSex");
b.focus();
}
function testb(){
alert(" B Onblur() ");
var a = document.getElementById("txtName");
a.focus();
}
A:
B:
Insert title here
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();
}
}
});
}
A:
B:
ソリューションはネット上で多く検索され、方法にポップアップダイアログのコードを書くことで、ループ呼び出しの発生を確実に回避することができます.もう一つはonblurメソッドをonchangeに変更することです.
どのような方法を使うかは実際の状況によって決めなければなりませんが、私が最終的に使ったのはonchange()方法で、プロジェクトのヒントが使うポップアップダイアログボックスのため、全体のスタイルの統一のために方法を変えました.
onchange()の方法を簡単に紹介しますが、
Onchangeメソッド:入力ボックスがフォーカスを失い、valueが変更された後にトリガーされます.
上記の定義から、Onchangeメソッドをトリガするには、value値が変更され、入力ボックスがフォーカスを失う2つの条件を満たす必要があることがわかります.このようにajax実行中にvalue値が変更されず、入力ボックスがフォーカスを失っていない場合、このイベントはトリガーされません.これにより、ループ呼び出しは容易に発生しません.
上記の状況から、Onblurメソッドにポップアップボックスがある場合は、同じページであまり使用しないほうがいいという結論が得られます.