blur時にdivを挿入すると何をクリックしているかが分からない

input.blur時に独自のエラーボックスを出すことを想定したプログラムで
focus状態で「tab button」をclickしようとした場合tabもlayerもクリックされていないようですが一体何がクリックされているのでしょうか？

<div id="tab" onclick="console.log('tab Click')">tab button</div>
<input type="text" onBlur="document.body.appendChild(layer)" /><br />

<style type="text/css">
    .layer{background-color:#F00;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.5;}
 </style>
 <script type="text/javascript">
    var layer = document.createElement("div");
    layer.className = "layer";
    document.body.onclick = function(event){console.log(event)};
 </script>