检查 ('div')mouseenter 和 ('a')mouseleave

Question

我的问题如下： 我有一个触发器（a）和一个弹出窗口（div）。 div 并不嵌套在锚点内。

• 当我将鼠标悬停在 a 上时，我希望显示 div。
• 当我从 a 转到 div 时，我希望它保持可见。
• 当我离开 div 时，我希望它关闭。
• 当我将鼠标悬停在 a 上并离开而不进入 div 时，我希望 div 关闭。

我已经弄清楚了大部分内容，但现在我正在为没有要求而苦苦挣扎。 2. 当检查 a 上的 mouseleave 时，我检查 div 上是否有 mouseenter 。如果是的话，我想中止 mouseleave。如果没有，我想关闭div。

我做错了什么？这是正确的方法吗？

这是标记：

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>

这是 jQuery：

$('.popup_toggle').mouseenter(function() {
        var element = $(this).next('.popup_div');
        $.data(this, 'timer', setTimeout(function() {
            element.show(100);
        }, 500));
    });

    $('.popup_toggle').mouseleave(function() {
        clearTimeout($.data(this, 'timer'));
            if($('.popup_div').mouseenter==true)
            {
                return false;
            }
            else
            {
                $('.popup_div').hide(100)
            };
    });

Answer 1

你想要做的事情相当简单。输入触发器时，识别面板（图层、弹出窗口等），使用 .data() 保存彼此的引用，并让事件处理程序检查相关目标是否是触发器（从面板视图）或面板（从触发器视图）。我把一些东西放在一起。查看控制台日志以了解其工作原理... http://jsfiddle.net/rodneyrehm/X5uRD/< /a>

Answer 2

这很可能行不通……不。我建议您向

元素添加一个 mouseenter 和 mouseleave 回调，并让它们设置一个全局变量来告诉您的其他回调如何处理它们的事件，即“如果全局变量为真，不要隐藏 mouseleave 上的弹出窗口，否则隐藏弹出窗口”或类似的内容。

另一种方法是当 mouseleave 回调尝试隐藏弹出窗口时检查鼠标是否在弹出窗口内。但这可能比其价值要多得多的工作。

Answer 3

我相信您的实现问题在于 div 上的 mouseenter 会在 a 的 mouseleave 之后不久触发>。

这将为您提供如下信息：

$('.popup_toggle').mouseenter(function() {
    // Clear any pending "hide" timer
    // Set a show timer
});

$('.popup_toggle').mouseleave(function() {
    // Clear any pending "show" timer
    // Set a hide timer
});

$('.popup_div').mouseenter(function() {
    // Clear any pending "hide" timer
});

请注意，您必须确保从 .popup_toggle 事件和 .popup_div 事件访问相同的计时器。您可能需要考虑使用 Ben Alman 的 doTimeout 插件帮忙解决这个问题。它（通常）会产生比手动使用 setTimeout/clearTimeout 更清晰的代码。