1、打开弹窗如下,在百度输入框里面输入中文时会触发layer弹窗绑定的mouseleave事件
$("#layui-layer"+layer.index).on("mouseleave",function(e){
// 获取鼠标状态,x,y
mouseX = e.pageX;
mouseY = e.pageY;
// 获取layer弹窗的top left width height等信息
var dialogRect = document.getElementById("layui-layer"+layer.index).getBoundingClientRect();
//判断鼠标指针是否离开了百度页面,如果是就关闭弹窗
if((mouseX > dialogRect.left&& mouseX < dialogRect.left+dialogRect.width+4) && (mouseY > dialogRect.top && mouseY < dialogRect.top+dialogRect.height+4)) {
return;
} else {
if(window[self.getAttribute("id") + 'timeout']){
clearTimeout(window[self.getAttribute("id")]);
window[self.getAttribute("id") + 'timeout'] = 0;
}
if(window['layerid']) {
window['layerid'] = 0;
}
layer.closeAll();
}
});
问题原因(笔者猜测的原因是这样的,如果有大佬知道具体原因还望赐教):
当输入中文时,鼠标的光点没有在layer弹窗中,也就是失去了焦点,所以会触发mouseleave事件而关闭弹窗
解决方法:
将mouseleave事件换成mouseout事件,问题得到了解决,输入框输入中文时不再触发mouseout事件来关闭弹窗