javascript - focusout イベントが一部の要素を無視するようにする

Question

以下のコードで をクリックする<input type="text" id="one" />と、「赤いブロック」が表示されます。集中すると「赤いブロック」が消えます。

「赤いブロック」または次のフォーカスされた要素であるfocusout場合に発火しないようにするにはどうすればよいですか?<input type="text" id="two" />

デモ

JavaScript

$('#one').focus(function () {
    $('#divRemove').show();
});

$('#one').focusout(function () {
    $('#divRemove').hide();
});

$('#divRemove').click(function(){
    alert($(this).text());    
});

HTML

<input type="text" id="one" />_______
<input type="text" id="two" />
<br/>
<br/>
<div id="divRemove" style="width:100px;height:100px;background:red; display:none;">remove on focus out</div>

Answer 1

#one と #two の両方に焦点を当てることができます

$('#one,#two').focus(function () {
    $('#divRemove').show();
}).focusout(function () {
    $('#divRemove').hide();
});

デモ

アップデート

このようなカスタム インデックスを指定しない限り、実際に div にフォーカスすることはできません。tabindex="0"

<div id="divRemove" tabindex="0"

そして、jQueryでこれを行います

$('#one,#two,#divRemove').focus(function () {
    $('#divRemove').show();
}).focusout(function () {
    $('#divRemove').hide();
});

デモ