title: Capture div focusout
body: <p>I have a main div (parent) with a input (child) and 2 other child div (clickable).</p>
  <p>I want to capture focus out event for the main div - not when input or other 2 clickable div are clicked or focused. I have set up an event handler using jQuery to capture <code>focusin</code> <code>focusout</code> events on all the elements.</p>
  <p>What I see is when I click on the input:</p>
  <ol>
  <li>first input is focused</li>
  <li>then the main div.</li>
  </ol>
  <p>If I click on any other clickable divs</p>
  <ol>
  <li>event fires first <code>focusout</code> for input</li>
  <li>then main div and then other div gets focus in and main div get <code>focusin</code>.</li>
  </ol>
  <p>I don't want main div to loose focus when clicked on other clickable divs.</p>
  <p>How can I achieve this? I want to validate the input on lose focus  but not when clicked other divs.</p>
  <p>So far this is what I have : <a href="http://jsfiddle.net/lacrymosaggv/T9j5P/" rel="nofollow noreferrer">Fiddle</a></p>
  <p><em>HTML :</em></p>
  <pre><code>&lt;div id=&quot;main&quot;&gt;
      &lt;input id=&quot;i&quot; type=&quot;text&quot; /&gt;
      &lt;div id=&quot;Div2&quot; class=&quot;icons&quot; style=&quot;background-color:blue; right: 25px;&quot; onclick=&quot;log('Clear Clicked');&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;Div1&quot; class=&quot;icons&quot; style=&quot;background-color:red;&quot; onclick=&quot;log('DD Clicked');&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em>CSS :</em></p>
  <pre><code>* {
      -webkit-box-sizing: border-box;
      /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;
      /* Firefox, other Gecko */
      box-sizing: border-box;
      /* Opera/IE 8+ */
  }
  #main {
      top: 50px;
      left: 200px;
      position: absolute;
      border: 1px solid #00bfff;
      width: 250px;
      height: 27px;
  }
  input {
      border: none;
      width: 248px;
      height: 25px;
      position: absolute;
      z-index: 200;
  }
  .icons {
      text-align:center;
      border:1px solid blue;
      height: 23px;
      width: 23px;
      position: absolute;
      top: 2px;
      right: 2px;
      z-index: 99999999999999999999999;
      background-position: center;
      background-repeat: no-repeat;
  }
  </code></pre>
  <p><em>jQuery :</em></p>
  <pre><code>$(&quot;#main&quot;).focusin(function () {
      log(&quot;Main div got focused&quot;);
  });
  
  $(&quot;#i&quot;).focusin(function () {
      log(&quot;input got focused&quot;);
  });
  
  $(&quot;#Div2&quot;).focusin(function () {
      log(&quot;dropdown div got focused&quot;);
  });
  
  $(&quot;#Div1&quot;).focusin(function () {
      log(&quot;clear div got focused&quot;);
  });
  
  $(&quot;#main&quot;).focusout(function () {
      log(&quot;Main div lost focused&quot;);
  });
  
  $(&quot;#i&quot;).focusout(function () {
      log(&quot;input lost focused&quot;);
  });
  
  $(&quot;#Div2&quot;).focusout(function () {
      log(&quot;dropdown div lost focused&quot;);
  });
  
  $(&quot;#Div1&quot;).focusout(function () {
      log(&quot;clear div lost focused&quot;);
  });
  
  function log(msg) {
      //window.console.log(msg);
      $(&quot;body&quot;).append(&quot;&lt;p&gt;&quot; + msg + &quot;&lt;/p&gt;&quot;);
  }
  </code></pre>
  <p>Any help or guidance appreciated</p>