title: blur event.relatedTarget returns null
body: <p>I have an <code>&lt;input type="text"&gt;</code> field and I need to clear it when this field loses focus (whiech means that user clicked somewhere on the page). But there is one exception. Input text field should't be cleared when user clicks on a specific element.</p>
  
  <p>I tried to use <code>event.relatedTarget</code> to detect if user clicked not just somewhere but on my specific <code>&lt;div&gt;</code>.</p>
  
  <p>However as you can see in snippet below, it simply doesn't work. <code>event.relatedTarget</code> is always returning <code>null</code>!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function lose_focus(event) {
    if(event.relatedTarget === null) {
      document.getElementById('text-field').value = '';
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.special {
    width: 200px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
    margin: 25px 0;
    padding: 15px;
  }
  .special:hover {
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something..."&gt;
  
  &lt;div class="special"&gt;Clicking here should not cause clearing!&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>