mouseleave 和 mouseout , mouseenter 和 mouseover, mouseover 和 mousemove
最编程
2024-06-13 13:45:43
...
mouseenter 和 mouseleave 是一对事件,分别指鼠标移入和离开当前元素, 这两个事件不冒泡;
mouseover 和 mouseout 是一对事件,指鼠标移入和离开元素,但是这个两个事件是冒泡,也就是说,鼠标移入或离开当前元素的子元素时,事件会冒泡到当前元素,当前元素的事件会被触发。
mousemove 是 鼠标在元素上移动时触发,具有冒泡性质。鼠标在元素内部移动时也会触发该事件。
当鼠标从外移入元素内, 再移出元素,事件触发的时序为:mouseover,mouseenter,mousemove,mouseout , mouseleave
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> function mousemove(x){ console.log("mouse move"); } function mouseout(x){ console.log("mouse out"); } function mouseenter(){ console.log("mouse enter"); } function mouseover(){ console.log("mouse over"); } function mouseLeave(){ console.log("mouse leave"); } </script> </head> <body> <img onmousemove="mousemove(this)" onmouseover="mouseover(this)" onmouseleave="mouseLeave(this)" onmouseenter="mouseenter(this)" onmouseout="mouseout(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32"> </body> </html>
输入结果为:
mouse over
mouse enter
mouse move
mouse out
mouse leave
推荐阅读
-
鼠标悬停事件详解:处理、委托和mouseover与mouseenter的区别
-
mouseout、mouseover 和 mouseleave、mouseenter 区别
-
mouseleave 和 mouseout , mouseenter 和 mouseover, mouseover 和 mousemove
-
为什么 mouseenter 和 mouseover 如此紧密地联系在一起?
-
在 jquery 中,mouseover、mouseout 和 mousemove 的用法是什么?
-
详解 Vue3 中的鼠标事件 mousemove、mouseover 和 mouseout - 两个,mouseover - 鼠标移动事件
-
jquery 绑定事件 - mouseover mouseout mouseenter mouseleave hover
-
关于事件 mouseover、mouseout、mouseenter 和 mouseleave 的区别
-
关于事件 mouseover、mouseout、mouseenter 和 mouseleave 的区别
-
jq:mouseover 和 mouseout 多重触发解决方案