layer弹出框覆盖在触发mouseenter 和 mouseleave事件元素上的一种解决方法

本文主要是介绍layer弹出框覆盖在触发mouseenter 和 mouseleave事件元素上的一种解决方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述：
需求是在table中有告警数据，当鼠标移动到告警数据上，弹出该告警数据关联的信息(关联数据也是表格形式)，移开鼠标时，弹出框关闭。
但是在关闭时有这种情况，当弹出框在告警数据的上层时，移动鼠标，先触发mouseleave事件，关闭弹出框，由于弹出框关闭，鼠标回到告警数据上，又弹出，一直循环。

目前能想到的解决方案是：在触发mouseleave事件时，判断鼠标位置，是否在弹出框div（layer中的自定义页面）的区域，如果是在该区域，则给div添加mouseleave事件，离开div时关闭div。

<table ><tr><th  class="test">xxx</th><td>yyy</td></tr>
</table>
<div id="tableDivId"><table ><tr><td>xxx</td><td>yyy</td></tr><tr><td>xxx</td><td>yyy</td></tr>
</table>	
</div>

$(".test").each(function(){var thSpan = "<span>" + $(this).text() +"</span>";$(this).html(thSpan);var tdSpan = "<span>" + $(this).next().text() +"</span>";$(this).next().html(tdSpan);$(this).children().on("mouseenter",function(){var tableDivId = $(this).parent().attr("dataKey").replace(".","_");layer.closeAll();layer.open({type: 1,skin: 'layui-layer-demo', //样式类名closeBtn: 1, //不显示关闭按钮anim: 2,shade: 0,shadeClose: true, //开启遮罩关闭area: '70%',offset:'50px',content: $("#"+tableDivId).html()})});$(this).children().on("mouseleave",function(e){//"#layui-layer"+layer.index  根据layer.index  找到对应显示的弹出框自定义页面var width = $("#layui-layer"+layer.index).width();var height = $("#layui-layer"+layer.index).height();var offset = $("#layui-layer"+layer.index).offset();var top = offset.top;var left = offset.left;//鼠标位置var mouseX = e.pageX;var mouseY = e.pageY;if((mouseX > left && mouseX < left+width) && (mouseY > top && mouseY < top+height)	){$("#layui-layer"+layer.index).on("mouseleave",function(e){layer.closeAll();});}else{layer.closeAll();}	});})

这篇关于layer弹出框覆盖在触发mouseenter 和 mouseleave事件元素上的一种解决方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---