关于mouseleave事件触发的bug问题

在做下拉树搜索功能的时候,下方内容框需要一个鼠标移出时就隐藏的功能,于是使用mouseleave的方法, 但是出现了一个问题就是在点击树展开个隐藏的时候,也触发了leave事件,将下方的树进行隐藏,出现了不好的用户体验

问题原因:

  就是因为leave事件存在一个bug问题,如果绑定外层div里面还存在div,当鼠标离开内层div的时候同样的会触发mouseleave的事件,如果里面存在多个div,离开每一个的时候都会触发一次leave事件,

解决办法:

  大致意思就是在触发了mouseleave事件的延时判断鼠标是不是还在menuContent内,如果在就不执行隐藏方法,如果不在就隐藏

附上代码:

var Timer1;
$("#menuContent").mouseleave(function(){
    Timer1=setTimeout(function(){
        hideMenu();
    })
})
$("#menuContent").mouseover(function(){
    window.clearTimeout(Timer1);
})
原文地址:https://www.cnblogs.com/pengfei25/p/8275860.html