title: Prevent firing focus event when clicking on div
body: <p>This question is similar to my previous question, <a href="https://stackoverflow.com/q/8689716/931340">Click action on Focused DIV</a>,
  but this time the main topic is, How to prevent focus event from triggering when I click one of the divs.
  Last time I had one div with tabindex='-1' to make it focusable on click, now I have a list of divs with tabindex>0 so they can gain focus when tabbing as well.</p>
  
  <pre><code>&lt;div tabindex='1'&gt;Div one&lt;/div&gt;
  &lt;div tabindex='1'&gt;Div two&lt;/div&gt;
  &lt;div tabindex='1'&gt;Div tree&lt;/div&gt;
  &lt;div tabindex='1'&gt;Div four&lt;/div&gt;
  </code></pre>
  
  <p>some styling:</p>
  
  <pre><code>div {
      height: 20px;
      width: 60%;
      border: solid 1px blue;
      text-align: center;
  }
  div:focus {
      border: solid 2px red;
      outline: none;
  }
  </code></pre>
  
  <p>Now I'm using a flag(action) to fire an action(alert) when clicking the div for 2nd time, and with just one click if it's already focused,with TAB for example.</p>
  
  <pre><code>var action = false;
  $('div')
      .click(function(e){
          e.stopImmediatePropagation();
          if(action){alert('action');}
          action = true;})
      .focus(function(){action = true;})
      .blur(function(){action = false;});
  </code></pre>
  
  <p>The problem with the code above is focus event is being fired, which means stopImmediatePropagation doesn't work the way I expected.. The two click action works commenting the focus event line, but you still need to double click when div gains focus on TAB.
  Here is the example: <a href="http://jsfiddle.net/3MTQK/1/" rel="noreferrer">http://jsfiddle.net/3MTQK/1/</a></p>