今天在使用鼠标事件时,用错了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
更多专业前端知识,请上 【猿2048】www.mk2048.com