mouseout、mouseover 和 mouseleave、mouseenter 区别
最编程
2024-06-13 13:46:56
...
今天在使用鼠标事件时,用错了mouseout,于是做个测试总结。
结论:
mouseenter:当鼠标移入某元素时触发。
mouseleave:当鼠标移出某元素时触发。
mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发。
mouseout:当鼠标移出某元素时触发,移入和移出其子元素时也会触发。
mousemove:鼠标在某元素上移动时触发,即使在其子元素上也会触发。
mouseout、mouseover和mouseleave、mouseenter最大的区别,在于子元素连带触发。
例子:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .a{ width: 500px; height: 500px; background: aliceblue; } .b{ width: 200px; height: 200px; background: beige; } .c{ width: 100px; height: 100px; background: violet; } </style> </head> <body> <div class="a">A <div class="b" onmouseenter="mouseenter()" onmouseleave="mouseleave()" onmouseout="mouseout()" onmouseover="mouseover()" onmousemove="mousemove()">B <div class="c">C </div> </div> </div> <script> function mouseenter(){ console.log('mouseenter') } function mouseleave(){ console.log('mouseleave') } function mouseout(){ console.log('mouseout') } function mouseover(){ console.log('mouseover') } function mousemove(){ console.log('mousemove') } </script> </body> </html>
效果:
操作:
从A元素到C元素,再从C回到A,控制台输出如下:
演示地址:
http://htmlpreview.github.io/?https://github.com/codingforme/code-learn/blob/master/css-demo/mouse-event.html
推荐阅读
-
鼠标悬停事件详解:处理、委托和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 多重触发解决方案