title: Don't focus div with tabindex when user clicked element
body: <p>I added <code>tabindex="0"</code> to add the ability for users to tab to this <code>div</code> and use the keyboard to interact with it. Upon click or hitting enter/space when it's active, a popup <code>div</code> is presented. The focus style it applies to the <code>div</code> upon hitting tab is fine, but I noticed when users click on the <code>div</code> to activate it, the focus style is applied to it at that time as well. If they hold the mouse down the focus style is applied to it.</p>
  
  <p>How can I only provide a visual focus for this <code>div</code> when the user tabbed to it, but don't show the focus when the user clicked on it?</p>
  
  <p>I am currently removing focus via <code>.blur()</code> when it's activated but there is still a flash of this focus style and it's always visible while the user is holding the mouse down.</p>
  
  <p>A similar interface that exhibits the desired behavior is the Pages app on iCloud.com. You can tab to focus the different icons in the toolbar, then when you tab to your name and hit return/space, a popup appears and the focus on your name is removed. At that point the name text color changes to a darker gray. If you clicked on your name instead of using the keyboard, you never see the focus that is applied to your name, you only see the text color change when the popup is presented.</p>