关于浮动菜单在点击之前自动隐藏的问题

做div浮动菜单，需要在点击菜单项之后再消失整个菜单，但是如果简单在外层div中设置onblur的话，就会在内层菜单触发点击之前隐藏掉整个菜单导致点击不生效。

简单搜索了一下，大概有设置全屏透明层和在内层的onmousedown里设置preventDefault的方法。但是如果用React或vue之类的框架，有一种不知道算是简单还是复杂的方法，即在外层菜单同时设置onfocus和onblur， 类似于

<div onFocus={()=>{this.focused = true}}
     onBlur={()=>{
         this.focused = false;
         setTimeout(()=>{
             if (!this.focused) { // fold }
         });
     }}>
     {*...inner*}
</div>

主要原理是：如果点击菜单内的组件，会先调用onblur然后调用onfocus，再利用setTimeout延迟下一个周期进行判断。