使用layer弹窗里面有输入框时,在输入中文时会触发mouseleave事件而关闭弹窗

3 篇文章 0 订阅

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事件来关闭弹窗

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值