title: Clicking outside a contenteditable div stills give focus to it?
body: <p>For some reason I need to use contenteditable div instead of normal text input for inputting text. (for some javascript library) It works fine until I found that when I set the contenteditable div using <code>display: inline-block</code>, it gives focus to the div even if I click outside the div!</p>
  
  <p>I need it to be giving focus to the div only when the user clicks right onto the div but not around it. Currently, I found that when the user clicks elsewhere and then click at position that is the same row as the div, it gives focus to it.</p>
  
  <p>A simple example to show the problem:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="outside"&gt;
      &lt;div class="text-input" contenteditable="true"&gt;
          Input 1
      &lt;/div&gt;
      &lt;div class="text-input" contenteditable="true"&gt;
          Input 2
      &lt;/div&gt;
      &lt;div class="unrelated"&gt;This is some unrelated content&lt;br&gt;
        This is some more unrelated content
        This is just some space to shows that clicking here doesn't mess with the contenteditable div
        but clicking the side mess with it.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.outside {
    margin: 30px;
  }
  div.text-input {
    display:inline-block;
    background-color: black;
    color: white;
    width: 300px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/AXM4Y/7/" rel="noreferrer">The JSFiddle for displaying the problem</a></p>
  
  <p>Is there a way (CSS or javascript are both acceptable) to make the browser only give focus to div when it is clicked instead of clicking the same row?</p>
  
  <p>P.S. I noticed that there are similar problem (<a href="https://stackoverflow.com/questions/24345805/prevent-contenteditable-element-from-getting-focus-when-clicking-parent">link to other related post</a>), but the situation is a bit different and the solution provided is not working for me.</p>