今天在使用鼠標事件時，用錯了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，控制台輸出如下：
演示地址：