如何阻止 Mouseleave 在目标上方出现的元素上触发？

Question

jQuery 的 mouseleave 似乎会在任何覆盖元素上触发。我不希望这些覆盖元素被视为“超出”我的目标区域。这是一个使用 jQueryUI 中的日期选择器的简单示例：

http://jsfiddle.net/6Wm9L/

$("#datepicker").datepicker({});

$(".wrapper")
.mouseenter(function(){
    $("#status").html("Status: Mouse is INSIDE");
})
.mouseleave(function(){
    $("#status").html("Status: Mouse is OUTSIDE");
});

请注意，当鼠标悬停在日期选择器上时，将触发 mouseleave。对于这个日期选择器示例，有什么好的解决方案可以防止这种情况发生？对于我未来可能添加的涵盖目标的任何元素，什么是好的解决方案？

Answer 1

您可以使用relatedTarget事件的属性来过滤您的处理程序：

.mouseleave(function(e){
    if($(e.relatedTarget).closest('.ui-datepicker').length) return;
    $("#status").html("Status: Mouse is OUTSIDE");
});

--演示--