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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。