hoverIntent 在选择元素上触发“out”功能答案

【问题标题】：hoverIntent triggers 'out' function on select elementhoverIntent 在选择元素上触发“out”功能
【发布时间】：2010-01-20 20:56:35
【问题描述】：

下面的代码用于显示和隐藏 Mega Dropdowns。如果您将鼠标悬停在具有“dropDown”类的链接上，则会显示子“.dropPanel”。只要您的鼠标悬停在链接或下拉面板上，下拉面板就会保持显示。将光标移动到链接或面板以外的任何位置，面板将被隐藏。很基本的东西。

在其中一些大型下拉菜单中，有一些表单包含选择元素。在 Firefox 中，一切都很好。在 IE（特别是 8，没有测试任何其他版本）中，如果您将鼠标悬停在下拉面板中的选择元素上，hoverIntent 会触发 dropPanelOff() 的“out”函数并且下拉面板隐藏。

如何防止这种情况发生？

        // Apply Hover Intent to Menu Panels
        $(".dropDown").hoverIntent({
            sensitivity: 10, 
            interval: 150, 
            over: dropPanelOn, 
            timeout: 150, 
            out: dropPanelOff
        });

            // Menu Over function call
            function dropPanelOn() {
                $('a[rel="dropLink"]', this).addClass('hover');
                $('.dropPanel', this).slideDown('fast');
            }

            // Menu Out function call
            function dropPanelOff() {
                obj = this;
                $('.dropPanel', this).slideUp(100, function(){
                    $('a[rel="dropLink"]', obj).removeClass('hover');
                    $('.dropLink span', obj).removeClass('hover');
                });
            }

【问题讨论】：

你解决过这个问题吗？我对 firefox 和登录表单有同样的问题，firefox 显示存储的用户名列表，单击这些后触发鼠标退出事件

标签： jquery hoverintent

【解决方案1】：

尝试将此添加到您的代码中：

$(".dropDown select").mouseout(function(e) {
        e.stopPropagation();
});

【讨论】：

【解决方案2】：

也许您应该只使用本机悬停事件，您也可以为其添加延迟：

var time = false;
$(".dropDown").hover(function () {
   if ($("dropPanel", this).is(":hidden")) $("dropPanel", this).slideDown('fast');
   else window.clearTimeout(timer);
}, function () {
   var obj = $(this);
   timer = window.setTimeout(function () {obj.slideUp(100);}, 150);
});

【讨论】：