Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    var div = document.getElementsByTagName('div')[0];
    div.classList.toggle('active');
    div.addEventListener('blur', function(e){
      if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
        e.preventDefault();
        return;
      }
      div.classList.toggle('active');
    }, true);

    function isChild(child, parent) {
      while (child && (child = child.parentNode) && child !== parent);
      return !!child;
    }

<!-- language: lang-css -->

    div {
      display: none;
    }
    div.active {
      display: block;
    }

<!-- language: lang-html -->

    <div tabindex="-1">
      <header>My Tytle</header>
      <content>Hello world!!!</content>
      <footer>
        <button>My button</button>
      </footer>
    </div>

<!-- end snippet -->

A condição verifica se o elemento que causou o *blur* (`e.relatedTarget`) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com `event.preventDefault()`;

Resultado esperado: ao clicar sobre qualquer elemento da <div> ele continua visível, ao clicar fora ela é ocultada.