mouseover和mouseout事件在鼠标经过子元素时也会触发

Posted 2020-08-14 进击的前端狗

JavaScript的mouseover和mouseout事件，在绑定元素内部有子元素的情况下，

经过绑定元素时会多次触发mouseover和mouseout事件。

jQuery解决办法:

jquery的mouseenter和mouseleave方法已经修复了这个问题，可以直接用来替代mouseover和mouseout

不过有个mouseenter和mouseleave有个小问题是，让鼠标从文档外直接进入绑定事件的元素时，mouseenter不生效

暂时解决办法是，别让绑定事件的元素靠浏览器边缘，尽量留出至少1px间距。

另外，jquery的hover()方法,相当于使用了mouseenter和mouseleave。也能解决mouseover和mouseout的问题。