在 ('a')mouseleave 上检查 ('div')mouseenter答案

【问题标题】：check for ('div')mouseenter on ('a')mouseleave在 ('a')mouseleave 上检查 ('div')mouseenter
【发布时间】：2011-10-11 10:57:27
【问题描述】：

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

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

我已经弄清楚了大部分，但现在我正在努力解决要求。 2. 在 a 上检查 mouseleave 时，我检查 div 上是否有 mouseenter。如果是，我想中止鼠标离开。如果没有，我想关闭 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)
            };
    });

【问题讨论】：

标签： javascript jquery popup mouseenter mouseleave

【解决方案1】：

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

【讨论】：

感谢您的回复和创建示例！但即使看完之后，我也不知道你在那里做什么。我不得不承认，我以前没有 jQuery 或一般编程方面的经验，如果在使用它时出现问题，我需要能够维护自己的代码。我不能说为什么第一个答案是糟糕的编码，但我现在要采用这种方法，因为我实际上可以理解它:)

【解决方案2】：

这很可能行不通……不。我建议您也为您的<div> 元素添加一个mouseenter 和mouseleave 回调，并让它们设置一个全局变量，告诉您的其他回调如何处理它们的事件，即“如果全局变量为真，请不要'不要在 mouseleave 上隐藏弹出窗口，否则隐藏弹出窗口”或类似的东西。

另一种方法是在mouseleave 回调试图隐藏弹出窗口时检查鼠标是否在弹出窗口内。不过，这可能比它的价值要多得多。

【讨论】：

感谢您的快速回复，我用全局变量和一个新的计时器试了一下，效果很好！
-1 用于建议全局变量和未能注意 event.relatedTarget。对不起。
嗯...relatedTarget 仅适用，如果您在离开链接时立即进入弹出窗口，对吗？正如 axtavt 明确指出弹出窗口不是链接的一部分，我没有假设它们是直接邻居。

【解决方案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 plugin 来帮助解决此问题。它（通常）会产生比手动使用setTimeout/clearTimeout 更清晰的代码。

【讨论】：