<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; height: 300px; background-color: red; } #box2 { width: 150px; height: 150px; background-color: blue; } </style> </head> <body> <div id="box1"> <div id="box2"> </div> </div> <script> // mouseenter 和 mouseover的区别 var box1 = document.getElementById('box1'); var i = 0; // 触发子元素的mouseover，会冒泡到父元素上 // box1.onmouseover = function () { // i++; // console.log(i); // } // // 此事件不触发事件冒泡 box1.onmouseenter = function () { i++; console.log(i); } </script> </body> </html>