ブラーまたはフォーカスアウトイベントでフォーカスを取得しようとしている要素を取得するにはどうすればよいですか?また、これら 2 つのイベントの違いは何ですか? _html/css_WEB-ITnose

この投稿は、Javkburd によって最終編集されました: 2013-05-11 23:21:32

入力ボックスに入力し、一致するものと同様のドロップダウン リストを表示する、検索バーに似た機能を実装しました。入力された文字列 (実際には 1 列のテーブルを動的に生成します)、その他の詳細が処理されており、IE、Chrome、Safari、Firefox と互換性があります。しかし、入力ボックスがフォーカスを失ったときにテーブルを非表示にしたいだけですが、問題は「テーブル自体をクリックすると入力ボックスもフォーカスを失いますが、このときのクリックは、テーブルの一致する項目を作成することです」ということです。テーブルの特定の行が入力ボックスに表示されてから消えますが、すぐには消えません。」このとき、focusoutで取得したフォーカス要素はテーブルではなくボディとなり、ボディにイベントがバブルするはずです。しかし、この時点ではテーブルはまだフォーカスを取得していませんが、フォーカスを取得しようとしている状態です。実際にフォーカスを取得した要素を取得できれば、「テーブルであれば、ある行をクリックした後に一致する」と判断できます。コンテンツが入力ボックスに表示されてから消えます。テーブルでない場合は、そのまま消えてください。」愚かな方法は、テーブル以外の他のすべての要素のフォーカス イベント内でテーブルを消すことですが、これは面倒すぎます。最後に、フォーカスアウトとブラーの違いを知りたいと思います。ページの実行時の効果は次のとおりです (ページの他の要素は表示されません):

ディスカッションに返信 (解決策)

愚かな方法は

入力ボックスがフォーカスを失った後
settimeout After a一定時間が経過すると、ポップアップ リスト ボックスが消えます。これにより、クリックするチャンスが得られます

setTimeout はテーブルの非表示を遅らせ、テーブルの Mouseenter イベントを書き込み、タイマーをクリアし、mouseleave イベントによりテーブルを非表示にします

var タイマー;
$(input).blur(function(){
timer = setTimeout( Function () {
$ (テーブル) .hide ();
}, 200);
}}); .mouseenter (function () {
if (タイマー) clearMeout (タイマー);
});
$(table).mouseleave(function(){
$(table).hide();
});理解する？

SetTimeout はテーブルの非表示を遅らせ、テーブルの Mouseenter イベントを書き込み、タイマーをクリアし、mouseleave イベントによりテーブルを非表示にします

var timer;
$(input).blur(function(){
timer = setTimeout(function(){
$(table).hide();
},200)
});
$(table).mouseenter(function(){
if(timer) clearTimeout(timer);
} );
$(table) .mouseleave(function(){
$(table).hide();
}); 理解できますか？
自分の言ったことの何が理解できないのですか？問題は解決されました。また、ブラーとフォーカスアウトの違いについても聞きたいのですが、オンラインで適切なリソースが見つかりません。

SetTimeout はテーブルの非表示を遅らせ、テーブルの Mouseenter イベントを書き込み、タイマーをクリアし、mouseleave イベントによりテーブルを非表示にします

var timer;

$(input).blur(function(){
timer = setTimeout(function(){
$(table).hide();
},200)
});
$(table).mouseenter(function(){
if(timer) clearTimeout(timer);
} );
$(table) .mouseleave(function(){
$(table).hide();
}); 理解できますか？
一つだけ分からないのが、テーブルのtdに関数を追加したんです

td.onclick = function ()        {            if(timer)  clearTimeout(timer);            source.value = this.innerHTML;  //注意TextBox的innerHTML为空，因为text位于元素内部            $("#" + tableId).remove();        }

TextBoxのblur関数にも遅延タイマーを設定していますが

$("#txtEmail").blur(function(event)            {                timer = setTimeout(function () { $("#tableEmail").remove() }, 200);   //异步，立即返回                //设置定时器延时让table得到焦点并处理后再消失，而且延时不能太短也不能太长            })

でも、それがtdにない場合は.onclick、$("# " + tableId).remove() を書かないと、テーブルは消えません。つまり、タイマー内の遅延関数は実行されません。遅延内で実行プロセスを実行すると、タイマーの遅延関数の実行がブロックされ、失敗しますか?

SetTimeout はテーブルの非表示を遅らせ、テーブルの Mouseenter イベントを書き込み、タイマーをクリアし、mouseleave イベントによりテーブルを非表示にします

var timer;
$(input).blur(function(){
timer = setTimeout(function(){
$(table).hide();
},200)
});
$(table).mouseenter(function(){
if(timer) clearTimeout(timer);
} );
$(table) .mouseleave(function(){
$(table).hide();
}); 理解できますか？
一つだけ分からないのが、テーブルのtdに関数を追加したんです

td.onclick = function ()        {            if(timer)  clearTimeout(timer);            source.value = this.innerHTML;  //注意TextBox的innerHTML为空，因为text位于元素内部            $("#" + tableId).remove();        }

TextBoxのblur関数にも遅延タイマーを設定していますが

$("#txtEmail").blur(function(event)            {                timer = setTimeout(function () { $("#tableEmail").remove() }, 200);   //异步，立即返回                //设置定时器延时让table得到焦点并处理后再消失，而且延时不能太短也不能太长            })

でも、それがtdにない場合は.onclick、$("# " + tableId).remove() を書かないと、テーブルは消えません。つまり、タイマー内の遅延関数は実行されません。遅延内で実行プロセスを実行すると、タイマーの遅延関数の実行がブロックされ、失敗しますか?

input Blur イベントが最初に実行され、次に td onclick イベントが実行されるため、onclick 中にタイマーが最初にクリアされるため、setTimeout の関数は実行されません。

ご質問の fousout イベントと Blur イベントの違いについては、私は fousout に遭遇したことがありません。fousout イベントには、mouseout と同様に、どのオブジェクトが取得されるかを取得できる属性が 1 つあるはずだと思います。ファウスアウト後に集中します。

setTimeout 遅延でテーブルを非表示にし、テーブルの Mouseenter イベントを書き込み、タイマーをクリアし、mouseleave イベントでテーブルを非表示にします

var timer(function(){
timer = setTimeout) (関数() {
$(table).hide(); table).mouseleave(function(){
$(table).hide();
}); 理解できましたか？
一つだけ分からないのが、テーブルのtdに関数を追加したんです

td.onclick = function ()        {            if(timer)  clearTimeout(timer);            source.value = this.innerHTML;  //注意TextBox的innerHTML为空，因为text位于元素内部            $("#" + tableId).remove();        }

TextBoxのblur関数にも遅延タイマーを設定していますが

$("#txtEmail").blur(function(event)            {                timer = setTimeout(function () { $("#tableEmail").remove() }, 200);   //异步，立即返回                //设置定时器延时让table得到焦点并处理后再消失，而且延时不能太短也不能太长            })

でも、それがtdにない場合は.onclick、$("# " + tableId).remove() と書かないでください。実行がある限り、テーブルは消えません。つまり、タイマー内の遅延関数は実行されません。遅延中にプロセスを実行すると、タイマーの遅延関数の実行がブロックされ、失敗しますか?

inputのblurイベントが先に実行され、その後tdのonclickイベントが実行されるため、onclick中にタイマーが先にクリアされるため、setTimeoutの関数は実行されません。

ご質問の fousout イベントと Blur イベントの違いについては、私は fousout に遭遇したことがありません。fousout イベントには、mouseout と同様に、どのオブジェクトが取得されるかを取得できる属性が 1 つあるはずだと思います。 fousout後のフォーカス。
私が知っているのは srcElement、fromElement、toElement、target、relationTarget ですが、これらはフォーカスを取得しようとしている要素を取得できないようです。それらにどのような特別な意味があるのか​​はわかりません。

srcElement|| target 現在のターゲット要素
fromElement || どの要素から入力するか

srcElement|| どの要素から入力するか現在の要素
toElement || relationshipTarget 現在の要素から入力する要素

簡単に言うと:
私は誰ですか

私 どこから来たのか

どこへ行くのですか
srcElement 属性と target 属性は、blur またはfocusout は使用できますが、他の 3 つは使用できませんが、onmouseover と onmouseout ではすべての属性が使用できます。したがって、ここでフォーカスを取得しようとしている要素を実際に取得することはできず、遅延のみを使用できます。