<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div id="nav">一级菜单</div>
<div class="inner"></div>
</div>
<script src="./jquery-1.4.4.min.js"></script>
<script>
wrapper.onmouseover = function () {
generateChild();
}
function generateChild() {
console.log('enter');
$('.inner').html('');
$('.inner').append('<div class="inner-inner">二级菜单</div>');
$('.inner-inner').click(function () {
console.log(2);
})
}
</script>
</body>
</html>
bug:鼠标放在二级菜单上会一直打印enter,而且点击二级菜单不会触发它的点击事件。
找了很长时间才发现的错误。
错误原因首先是onmouseover事件是会冒泡的,当鼠标从父级元素移入子级元素的时候也会触发父级的onmouseover事件。
上面的例子中,鼠标移入一级菜单就会触发wrapper的mouseover事件,执行generate函数,生成二级菜单,然后鼠标又从一级菜单移入二级菜单,这时也会触发wrapper的mouseover事件,重新生成二级菜单,这时你原先鼠标的位置是在二级菜单的div上的,所以新的二级菜单生成后,又会触发二级菜单的mouseover事件然后冒泡到wrapper上,又执行generate函数,形成了死循环,所以点击二级菜单不会触发点击事件。
解决方法可以将wrapper的mouseover事件改为mouseenter,因为mouseenter是不会冒泡的,子元素触发mouseenter后不会冒泡的父元素上。