Javascript-форум - Проблема с панелью пользователя

Focus_and_Blur({ elem:document.getElementById('block'), focus:function (e) { //this == elem //e - обьект события _("#inform").innerHTML = 'focus on '+ this.id; }, blur: function (e) { //this == elem //e - обьект события _("#inform").innerHTML = 'blur '+ this.id; } });

<div id="div" style="position: fixed; top: 10px; left: 5px; outline-style: none; z-index: 100"> <a href="#">open</a> <div style="display: none"> <input> <input> </div> </div> <div></div> <script> window.onload = function () { var div = document.getElementById('div'); div.onclick = function (e) { e = e || event; var target = e.target || e.srcElement; if (target == this.children[0]) { var next = target.nextSibling.nextSibling; if (next.style.display != 'block') { next.style.display = 'block'; target.innerHTML = 'close'; div.nextSibling.nextSibling.style.cssText = 'position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 99'; } else { next.style.display = 'none'; target.innerHTML = 'open'; div.nextSibling.nextSibling.style.cssText = ''; } } } div.nextSibling.nextSibling.onclick = function () { div.children[1].style.display = 'none'; div.children[0].innerHTML = 'open'; this.style.cssText = ''; } } </script>

bes,снала сделай фокус на инпут в блоке , а потом табом переключай
у меня сработает blur

<!DOCTYPE HTML>
<html>
  <head>
  <style>
    #block {
      width:200px;
      height:200px;
      border:4px solid red;
    
    
    } 
    body {
    
      border:2px solid black;
    
    
    }
    
    </style>
  </head>
  <body tabindex='-1'>
    
    <div tabindex='-1' id='block'>
      wereasrwer
    <input type='text'>
      <div>
       <input type='text'> 
      </div>
    </div>
    
 <div id='inform'></div>
<input type='text'>
    <script>
      function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
      
      return document.querySelectorAll(selector)[0];
      
      }
      
      function Focus_and_Blur(opt){
      
      var elem = opt.elem, focusForElem;
      
      if (elem.addEventListener){ 
      
      elem.addEventListener('focus' , onFocus,true);
      
      document.addEventListener('focus',onDocumentFocus,true); 
    
      } else {
      
      elem.onfocusin = onFocus;
      document.onfocusin = onDocumentFocus;
    
      }
      
      function onFocus(e) {
      
        focusForElem = true;
        event.cancelBubble = true;
        opt.focus.call(this,e);
      }
      
        function onDocumentFocus (e) {
        
          if (focusForElem) {
            focusForElem = false;
            opt.blur.call(elem,e)
          }
        }
      
      };
      
  //пример вызова,  в саму функцию лучше не лезть     
      Focus_and_Blur({
        elem:document.getElementById('block'),
        focus:function () {
         
          _("#inform").innerHTML = 'focus on '+ this.id;

        },
        blur: function () {
        
         _("#inform").innerHTML = 'blur  '+ this.id;
        }
      });
    </script>

  </body>
</html>

а у тебя блок не скроется

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body style='border:1px solid black;'>
    <div>
    <div>
<div id="div" style="position: fixed; top: 10px; left: 5px; outline-style: none; z-index: 100">
	<a href="#">open</a>
	<div style="display: none">
		<input><br>
		<input>
	</div>
</div>
<div></div>
    </div>
    </div> 
    
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <input type='text'> 
<script>
window.onload = function () {
	var div = document.getElementById('div');
	
	div.onclick = function (e)  {
		e = e || event;
		var target = e.target || e.srcElement;
		if (target == this.children[0]) {
			var next = target.nextSibling.nextSibling; 
			if (next.style.display != 'block') {
				next.style.display = 'block';
				target.innerHTML = 'close';
				div.nextSibling.nextSibling.style.cssText = 'position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 99';
			} else {
				next.style.display = 'none';
				target.innerHTML = 'open';
				div.nextSibling.nextSibling.style.cssText = '';
			}
		}
	}
	
	div.nextSibling.nextSibling.onclick = function () {
		div.children[1].style.display = 'none';
		div.children[0].innerHTML = 'open';
		this.style.cssText = '';
	}
	
	
	
}
</script>
  </body>
</html>

<div id="div" style="position: fixed; top: 10px; left: 5px; z-index: 100"> <a href="#" onclick="return false">open</a> <div style="display: none"> <input> <input> </div> </div> <div></div> <input onclick="alert('input')"> <script> window.onload = function () { var div = document.getElementById('div'); div.onclick = function (e) { e = e || event; var target = e.target || e.srcElement; if (target == this.children[0]) { var next = target.nextSibling.nextSibling; if (next.style.display != 'block') { next.style.display = 'block'; target.innerHTML = 'close'; div.nextSibling.nextSibling.style.cssText = 'position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 99'; } else { next.style.display = 'none'; target.innerHTML = 'open'; div.nextSibling.nextSibling.style.cssText = ''; } } } div.nextSibling.nextSibling.onclick = function (e) { e = e || event; div.children[1].style.display = 'none'; div.children[0].innerHTML = 'open'; this.style.cssText = ''; var elem = document.elementFromPoint(e.clientX, e.clientY); elem.focus(); elem.click(); } } </script>