mouseover和mouseout闪烁问题

在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁。

原因: 一种是由于冒泡,子级的mouseover和mouseout触发了父级的mouseover和mouseout,一种是不明原因,也会造成这个现象。

解决方法:

1. setTimeout,类似于debounce处理

$('div').mouseout(function(){
      clearTimeout(t);
      t=setTimeout(zoomIn,400);
}).mouseover(function(){
      if(t!=null)clearTimeout(t);
      t=null;
}
);

2.使用jquery的mouseenter和mouseleave代替,或者使用jquery的hover方法来处理。hover方法是对mouseenter和mouseleave的封装,而mouseenter和mouseleave则是对mouseover和mouseout的封装,进行了srcElement的判断,忽略子元素的行为。

原文地址:https://www.cnblogs.com/mengff/p/4993788.html