1

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

编辑 我找到了解决我的问题的方法，尽管亚历克斯也提供了一个可行的解决方案。我mouseleave还在标签上添加了一个事件，其setTimeout功能将在 1.5 秒内执行。这将给用户足够的时间将鼠标悬停在打开的 div 上，该 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();
            }
        }
    };

请问有什么帮助吗？

4

3 回答 3

2

我会将<label>and包装<div>在一个容器中，<div>然后在其上执行所有鼠标/隐藏事件。

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

于 2012-08-29T14:03:10.967 回答
0

给你的 popupCalendar 一个明确的 ID 而不是一个类选择器，例如

<div id="popupCalendar">

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

现在，remove() 非常激烈，因为它将完全从 DOM 中删除 div。如果您希望再次显示日历，您只需 .hide() 即可。

但是您的逻辑似乎有点过于复杂，为什么不只是在 mouseenter 上使用 .show() 并在 mouseout 事件上使用 .hide() 呢？

于 2012-08-29T13:51:43.120 回答
0

如果标签页失去焦点，这将关闭整个标签页。但是，如果您定位它，它也可以用于页面内的某些内容，只需更改目标代码即可。

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)">
于 2017-11-02T22:50:32.253 回答