条件付き除去

Question

を集中するとき、私は次のようなHTMLがあります。

<input type="text" id="myText"> 
<div id="myDiv"> 

ユーザーがテキストフィールドの外に焦点を当てていたとき、私は、ユーザーがあるエリアに出て集中場合にのみ、#myDivを削除したいと思いますがDIVそのものではありません。

これまでのところ、ユーザーが画面をクリックした場所に関係なくdivを削除するコードがあります。ユーザーが内部をクリックしたときにdivを削除しないようにするには、次のコードに何を追加する必要がありますか？

$("#myText").focusout(function(evt) { 
    $("#myDiv").remove(); 
}); 

Answer 1

これはあなたが探しているものです。ブラーイベントが発生すると、フォーカスされた要素にアクセスできます。次に、要素のIDをチェックしてdivのidと一致するかどうかを調べることができます。一致しない場合はdivを削除します。ここで

$("#myText").blur(function(e){  
    var target = e.originalEvent.explicitOriginalTarget||document.activeElement; 

    if ($(target).closest("#myDiv").length == 0 && target.id != "myDiv") 
    $("#myDiv").remove(); 
}); 

私はjsbinにまとめる簡単な例です：http://jsbin.com/iwari3/10 は、それはあなたが元のバージョンは、Chromeで働いていなかったので を更新しました

探しているものであれば、私に教えてください私は別のアプローチをとることにしました。IE/FF/Chromeで動作しているようです。

var $myDiv = $("#myDiv"), 
    $myText = $("#myText"); 

$myText.blur(function(e){   
    if (!$myDiv.data("focused")) 
     $myDiv.remove(); 

    $myDiv.data("focused", false); 
}); 

$myDiv.mousedown(function(e){ 
    $(this).data("focused", true) 
}); 

この新しい方法では、mousedownの#myDivにフォーカスされたビットが保存され、blurイベントの前に発生します。テキストボックスのぼかしでは、フォーカスされたビットが設定されているかどうかを確認します。次に、フォーカスされたビットがfalseにリセットされ、テキストボックスが複数回クリックまたはクリックされた場合を処理します。ここで

はjsbin.com更新例です。http://jsbin.com/iwari3/11

Answer 2

フラグ値を持つ非表示フィールドを持つことができます。 divの内側をクリック上の

）は、（削除を呼び出す前に、あなたがこれを行う必要があります。1.

に隠しフィールドの値を設定します。

divを呼び出す前にこのフラグをチェックして削除してください。

フラグを解除した後に解除