Question

I have the following HTML:

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

When a user focuses out of the text field, I would like to remove #myDiv, ONLY if the user focused out to an area which is not in the DIV itself.

So far I have the code to remove the div no matter where the user clicked on the screen. What do I need to add to the following code in order to prevent the removal of the div if the user click inside it?

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

Answer 1

This is what you are looking for. When the blur event is fired, you can access the element that was focused and you can then check the id of the element to see if it matches the id on the div. If it doesn’t match, then remove the div.

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

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

Here is a quick example I put together on jsbin: http://jsbin.com/iwari3/10
Let me know if that is what you are looking for

Updated
Since the original version wasn’t working in Chrome, I decided to take a different approach and it seems to be working in 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)
 });

This new method will now store a focused bit on #myDiv on mousedown which gets fired before the blur event. In the blur of the textbox we check to see if the focused bit was set. The focused bit is then reset back to false to handle cases where the textbox is clicked in and out of multiple times.

Here is an updated jsbin.com example: http://jsbin.com/iwari3/11