整理一些 mouse 滑過事件差異
事件解釋
mouseover: 當滑鼠移動到被選元素和被選元素的子元素時,mouseover事件就會被觸發。
mouseover MDN 文件mousemove: 當滑鼠移動到被選元素內後,mousemove事件被觸發。
mousemove MDN 文件mouseenter: 當滑鼠移動到元素上時就會觸發mouseenter事件,類似mouseover,它們兩者之間的差別是mouseenter不會冒泡(bubble),也就是說當游標從它的子層物理空間移到它的物理空間上時不會觸發
mouseenter MDN 文件
相關討論文章
jQuery的mouseover()與hover()差異可參考 stackoverflow 討論mouseover():將事件綁定在「mouseover」JavaScript事件,或在元素上觸發該事件。hover():將一個或兩個處理程序綁定到匹配的元素,以在滑鼠游標進入和離開元素時執行。
CSS hover與JavaScript mouseover討論可參考 stackoverflow 討論- 討論中有人提到 CSS 比較好維護,也有提到
CSS hover在IE6雖可支援,但因為後來的IE7對CSS2的支持程度約為50%所以不支援div:hover
- 討論中有人提到 CSS 比較好維護,也有提到
javascript中mouseenter與mouseover差異也可看下面的文章javascript 中 mouseenter 與 mouseover 的異同
裡面也提供範例來顯示其差異Difference between mouseover, mouseenter and mousemove events in JavaScript
裡面提供mouseover、mouseenter、mousemove簡單說明