今天的工作任务，原本只有九点会议提到的 WP 项目里面的 Hover 菜单（这是重点），之后被测试发现了 2 个新问题，于是也变成了今天的任务了。
这个 Hover 菜单挺难搞的，因为除了要考虑到电脑端，还得考虑移动端。移动端相对简单一些，弄一个 Fixed 的弹出框，实现一个点击直接访问，长按弹出菜单的效果就可以了。
长按的实现其实就是一个定时器，点击的时候激活，如果长按就会设置一个长按的状态，在松开的时候进行检查。长按弹出菜单，没长按就模拟成「单击」的方式，执行指定操作（这里不能恢复 DOM 的默认操作，有没有大神指点给个更好的办法）
PC 端就更难搞了，因为需要将菜单使用 Absolute 定位到每个项目里面，且需要保证鼠标移出项目之后进入菜单，保证菜单不会消失。正常思路鼠标离开了项目就得认为“需要隐藏菜单”，但是如果我把鼠标移动到了菜单呢？怎么保证它不会消失？
后续：已经专门为此又写了一篇博文《使用原生 JS 写一个悬浮下拉菜单》做记录
一开始我使用的是 onmouseout 事件设置在项目上，实践证明这个事件是错误的，会导致「存在子元素的父元素」从父元素移到其子元素上也会触发。正确方式是使用 onmouseleave 替代，而保证移入到菜单里面不消失，是 @Shawn 给了我启发，这里也需要使用定时器。
大概思路就是，我将鼠标移出项目之后，并不会立即执行隐藏菜单，而是先设置一个 300ms 的定时器。（是不是和上面移动版长按的效果差不多？）此时如果我把鼠标移到了菜单，会设置一个标记为 true 的变量，此时定时器执行，检测到变量为 true，就跳过隐藏菜单的动作了。
为了保证下次设置定时器不会串，需要在鼠标移入到项目的时候就清除一次定时器，避免因为标记变量还原为 false 以及定时器仍然存在的情况。你可能会问为什么不在设置定时器那里取消，如果延时之后才取消，就会状态异常（不经过菜单直接离开 A，再进入 B，300ms 时间以内 A 下的定时器就仍然存在），导致下一次显示菜单还没出来多久就消失了。
