点击二级导航菜单,触发不了点击事件,而且一直触发mouseover事件

Document

点击二级导航菜单,触发不了点击事件,而且一直触发mouseover事件_第1张图片

bug:鼠标放在二级菜单上会一直打印enter,而且点击二级菜单不会触发它的点击事件。

找了很长时间才发现的错误。

错误原因首先是onmouseover事件是会冒泡的,当鼠标从父级元素移入子级元素的时候也会触发父级的onmouseover事件。

上面的例子中,鼠标移入一级菜单就会触发wrapper的mouseover事件,执行generate函数,生成二级菜单,然后鼠标又从一级菜单移入二级菜单,这时也会触发wrapper的mouseover事件,重新生成二级菜单,这时你原先鼠标的位置是在二级菜单的div上的,所以新的二级菜单生成后,又会触发二级菜单的mouseover事件然后冒泡到wrapper上,又执行generate函数,形成了死循环,所以点击二级菜单不会触发点击事件。

解决方法可以将wrapper的mouseover事件改为mouseenter,因为mouseenter是不会冒泡的,子元素触发mouseenter后不会冒泡的父元素上。

你可能感兴趣的:(点击二级导航菜单,触发不了点击事件,而且一直触发mouseover事件)