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

原创于 2019-03-01 18:21:50 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#菜单自动隐藏

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在使用React或Vue等框架开发时，如何解决div浮动菜单的显示与隐藏问题。通过在外层菜单设置onfocus和onblur事件，利用setTimeout延迟判断，确保点击菜单项时菜单不会立即消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做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延迟下一个周期进行判断。