在做一个网页的导航时遇到这样一个坑，鼠标移动在导航链接上出现导航闪烁的情况
放到任意链接上，导航会开始闪烁。打开F12开发者工具发现出现闪烁的原因在于一个class="show"不停切换导致的。图2
代码的整体思路应该是通过show这个class来决定是否显示透明导航块。通过询问得知这个悬浮主要用到了css的hover伪类，以及mouseover和mouseout事件来实现的。由图看出是切换class引起的bug，所以排除是hover的问题。直接在代码里面找到对应的鼠标事件。代码如图3。图4
从上述代码看出mouseover和mouseout指向同一个事件，只是传递的参数不同。当传入true时，透明导航块isList判断为真，它遍带有show这个class。透明导航块显示。反之透明导航块隐藏。showMenu函数没有任何逻辑，直接对this.isList赋值。于是猜测这个是由于mouseover和mouseout这两个鼠标事情冒泡引起的。
于是，我尝试使用mouseenter和mouseleave事件分别代替mouseover和mouseout事件。因为我们知道一旦某dom元素的子元素被mouseover了，它自己也就被mouseover了，而mouseenter却是物理上的，即只有你眼睛看到光标进入了的元素，才会触发mouseenter事件。换句话说mouseenter和mouseleave事件不会冒泡，mouseover和mouseout事件会事件冒泡。替换鼠标事件之后发现，原本的闪烁问题有得到缓解，但没有完全消失，第一次鼠标进入还会闪烁一次，而之前会多次闪烁。经查发现：mouseenter事件在鼠标进入某个元素，或第一次进入这个元素的某个子元素时触发。一旦触发后，在mouseleave之前，鼠标在这个元素的子元素上触发mouseenter事件都不会触发这个元素的mouseenter事件。即：一旦进入，在子元素间的mouseenter不算是在本元素上的mouseenter。而mouseover事件是必然冒泡的，一旦子元素mouseover了，本元素必然mouseover（除非子元素上禁止冒泡了）。
知道这确实是事件冒泡引起的闪烁，这相当于鼠标进入目标元素后，执行一次mouseover事件，由于事件冒泡目标元素父类同样会执行一次mouseover事件。离开目标元素同样执行不止一次mouseout事件。这相当于this.isList的值为true极短的时间内由于事件冒泡this.isList的值会为false然后再变成true。正是这个极短的过程导致了闪烁。
知道了原理之后。我们可以利用setTimeout来控制mouseout事件的执行代码如图5
首先我在data里面声明了一个timer作为定时器(图5中没有体现声明)。然后通过判断show的值来决定是显示还是隐藏透明导航块。当show的值为false的时候是隐藏，但是没有立刻让isList的值变成false。而是设置一个定时器让其在0.5秒之后再赋值为false。而当show为true时清除在show为false声明的定时器。这样的处理会使得定时器还没来得及将isList设置为false的时候就被清除了，也就是来不及闪烁了。只有在0.5秒后没有mouseover事件发生，isList才会被设置为false，也就是在鼠标彻底离开导航时，透明导航去才会隐藏起来。至此闪烁问题得到解决了。
在这个问题下还有一点疑惑，就是闪烁问题只在360的某些版本中出现。其他主流浏览器并未发现这个问题。有清楚这个问题的朋友望告知。
