JS鼠标滑入滑出事件

一个很常见的交互，但由于从来没有自己代码实现过，浪费了一下午时间，整理总结一下这个坑。

具体需要实现的效果，如下：

这里演示的操作都没有点击动作，全部是鼠标滑入滑出效果。click事件实现这个功能是很简单的，毕竟常用。但是为了1：1还原效果，所以是要用鼠标滑入滑出事件。

mouseover 和 mouseout，是不是？一提到鼠标滑入滑出事件，下意识就想到了这两个。

坑就坑在这儿。

首先说一下这个交互的实现逻辑。仔细观察效果图，我的实现方案是：

1. 先在最外层放一个div，里面分两个div容器，子容器宽高和父容器相同。
2. 返回按钮一个容器，更多操作按钮一个容器，v-if控制。
3. 鼠标划入返回按钮时，显示更多操作按钮容器，隐藏返回按钮。
4. 鼠标滑出更多返回按钮的整个子容器时，才显示返回按钮，隐藏更多操作按钮容器。因为效果图上可以看出鼠标在更多操作按钮上方空白处滑动，页面并没有变化，超出一定宽高时，才进行恢复。

我为自己个一下子想到这么好的实现方案感到，妙啊。

当然我这里用的方法就是mouseover 和 mouseout。我一度以为有神奇bug，出现的问题是这样，如下：

真的是，像鬼畜一样！一直在抽风，我连dom元素都定位不到。

鼠标滑入三个点的图标上面时，显示了更多操作按钮容器，按我的逻辑来应该是鼠标滑出整个更多按钮的容器，才恢复页面的，可现在鼠标滑出单个按钮就触发了鼠标滑出事件。

其实问题很好定位的，一定是事件冒泡了，可是完全不清楚这个泡从哪冒到哪儿的。

程序员究极大法，百度！有啥问题百度就ok了。

查了一下鼠标事件的相关文档，真的是滑入滑出这一块用的少，遇到这个坑了，这里总结一下，可以自行测试验证。

1. mouseenter：当鼠标移入某元素时触发。
   

2. ：当鼠标移出某元素时触发。

3. mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。

4. mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。

5. mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。

本文分享自微信公众号 - 前端一起学（gh_3ba18d51f982）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

来源：oschina

链接：https://my.oschina.net/u/4627303/blog/4547668