Question

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

修改虽然亚历克斯还提供了可行的解决方案，但我找到了解决问题的方法。我在标签上添加了mouseleave事件，其中setTimeout函数将在1.5秒内执行。这一次将为用户提供足够的时间将鼠标悬停在open 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>的内容中，然后在其上执行所有鼠标/隐藏事件。

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

Answer 2

为popupCalendar提供一个显式ID而不是类选择器，例如

<div id="popupCalendar">

用#popupCalendar而不是.popupCalendar引用它。

现在，remove（）非常激烈，因为它将从DOM中完全删除div。如果你想再次显示日历，你应该只是.hide（）它。

但是你的逻辑似乎有点过于复杂，为什么不只是.show（）它在mouseenter和.hide（）上的mouseout事件？

Answer 3

如果标签页失去焦点，这将关闭整个标签页。如果你定位它，它也可以在页面内的某些东西上工作，只需更改目标代码。

<强> JavaScript的：

<script type="text/javascript" >
delay=1000 // 1 sec = 1000.
closing=""
function closeme(){
closing=setTimeout("self.close()",delay)
// self means the tab page close when losing focus, but you can change and target it too.
}
<!--// add onBlur="closeme()" onfocus="clearTimeout(closing)" to the opening BODY tag//-->
</script>

<强> HTML：

<body onBlur="closeme()" onfocus="clearTimeout(closing)">

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

3 个答案: