javascript - 如果元素失去焦点，关闭弹出 div

Question

我有以下场景:在标签的鼠标悬停事件中，我显示了一个 div。 div 必须保持打开状态才能在 div 中进行选择。在标签的 mouseout 事件中，div 必须消失。问题是当我的光标从标签移动到 div 时，标签的 mouseout 事件被触发，它在我到达那里之前关闭了 div。我有一个名为 canClose 的全局 bool 变量，我根据必须关闭或保持打开的情况将其设置为 true 或 false。为此，我删除了关闭标签的 mouseout 事件上的 div 的功能。 下面是一些示例代码。

编辑 我找到了解决我的问题的方法，尽管 Alex 也提供了一个可行的解决方案。 我还在标签上添加了一个 mouseleave 事件，带有一个将在 1.5 秒内执行的 setTimeout 函数。这一次将为用户提供足够的时间将鼠标悬停在打开的 div 上，这将再次将 canClose 设置为 false。

$("#label").live("mouseover", function () {
        FRAMEWORK.RenderPopupCalendar();
    });

$("#label").live("mouseout", function () {
        setTimeout(function(){
            if(canClose){
                FRAMEWORK.RemovePopupCalendar();
            }
        },1500);
    });

    this.RenderPopupCalendar = function () {
        FRAMEWORK.RenderCalendarEvents();
        }
    };


    this.RenderCalendarEvents = function () {
        $(".popupCalendar").mouseenter(function () {
            canClose = false;
        });

        $(".popupCalendar").mouseleave(function () {               
            canClose = true;
            FRAMEWORK.RemovePopupCalendar();
        });
    }

    this.RemovePopupCalendar = function () {
        if (canClose) {
            if ($(".popupCalendar").is(":visible")) {
                $(".popupCalendar").remove();
            }
        }
    };

有什么帮助吗？

Answer 1

我会包装 <label>和 <div>在包含<div>然后在上面做所有鼠标/隐藏事件。

查看这个 fiddle 示例 - http://jsfiddle.net/6MMW6/1