Blur element and it's parent element before element's blur handler runs?
<p>With this HTML:</p>

<pre><code>&lt;div id="SomeDiv"&gt;
   &lt;input id="SomeInput" /&gt;
   &lt;div id="ChildDiv"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I have an event handler assigned to the blur event for <code>SomeInput</code>. The blur event handler checks to see if <code>SomeDiv</code> or any of <code>SomeDiv</code>'s children still have focus, and aborts if any of them do (by design).</p>

<p>The problem is, when I call blur() on <code>SomeInput</code> pragmatically, <code>SomeInput</code>'s blur event handler runs, but aborts because it thinks <code>SomeDiv</code> still has focus.</p>

<p>I've tried explicitly blurring the input and the parent div, but the inputs handler still sees that parent as focused. I've also tried focusing and bluring the window and body elements, which doesn't seem to do anything.</p>

<p>How can I blur <code>SomeInput</code>, <code>SomeDiv</code>, and <code>SomeDiv</code>'s children simultaneously, so when SomeInput's event handler runs, it does <em>not</em> see SomeDiv as focused?</p>

<p>Event Handler:</p>

<pre><code>this.eBlur = function(event,eventThis) {
   console.log(this.$element.attr('id')+' has lost focus.');
   if(this.$element.has(":focus").length === 0){
      console.log('widget does not have focus');
      // do something.
   }
   else{
      console.log('something is still focused, do nothing.');
   }
}

var base = this;
this.$input.bind('blur', function(e){base.eBlur(e,this);});
</code></pre>

<p>Then to execute:</p>

<pre><code>console.log('about to blur');
this.$input.blur();
// The blur handler runs immediately here
console.log('blur complete');
</code></pre>

<p>So the log reads:</p>

<pre><code>about to blur
this.$element.attr('id')+' has lost focus.
something is still focused, do nothing.
blur complete
</code></pre>
