javascript - 如何阻止 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。对于这个日期选择器示例，什么是防止这种情况的好解决方案？对于我可能添加的任何 future 元素，覆盖目标的好的解决方案是什么？

Answer 1

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

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

--DEMO--