整理一些 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
簡單說明