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源创计划”，欢迎正在阅读的你也加入，一块儿分享。