title: onblur event is not firing
body: <p>I need to fire <strong><em>onblur</em></strong> event when I click outside "<em>aside panel</em>", in order to make the panel close if user clicks outside navigation panel.<br>
  Though I'm using React JS - but for simplicity I've written example in pure JavaScript. 
  Lately I've written something similar and everything works fine, but in this case it's not working, may be because of position fixed.</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>var d = document.getElementById("fname");
  
  d.addEventListener("blur", myFunction);
  
  function myFunction() {
    alert("Input field lost focus.");
  }
  var state = true;
  
  function myFunction2() {
    state = !state;
    if (state) {
      d.className = "header__aside";
    } else {
      d.className += " header__aside--open";
    }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    background-color: violet;
    padding: 50px;
  }
  
  .header__aside {
    background-color: #cfcfcf;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    font-size: 1.2rem;
    height: 100%;
    opacity: 0.9;
    position: fixed;
    right: -30%;
    top: 0;
    transition: right 0.5s ease-out;
    width: 30%;
    z-index: 10;
  }
  
  .header__aside--open {
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class='main'&gt;This example&lt;/p&gt;
  &lt;button type="button" onClick="myFunction2()"&gt;
  &amp;#9776;
  &lt;/button&gt;
  &lt;div class="header__aside" id="fname"&gt;
    &lt;div class="aside-nav"&gt;
      &lt;div class="aside-nav__header"&gt;
        &lt;button type="button" class="aside-nav__header-button" onClick="myFunction2()"&gt;x&lt;/button&gt;
      &lt;/div&gt;
      &lt;nav class="nav nav__aside"&gt;
        &lt;a class="nav__aside-link active" aria-current="true" href="/"&gt;Main&lt;/a&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>