在做下拉树搜索功能的时候,下方内容框需要一个鼠标移出时就隐藏的功能,于是使用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); })