停止隐藏事件答案

【问题标题】：Stop the hiding event停止隐藏事件
【发布时间】：2013-11-21 22:10:16
【问题描述】：

我有一个具有 2 个文本输入的 Superfish 菜单项，如果这些字段之一具有用户的焦点，我想确保菜单不会关闭（隐藏）。

除了不知道如何停止 Superfish Hide 事件执行之外，我拥有一切。

    jQuery(function () {
        jQuery('ul.sf-menu').superfish({
            onBeforeHide: function () {
                $('ul.sf-menu').find('input[type=text], input[type=password]').each(function () {
                    if ($(this).is(':focus')) {
                        //need code to stop Superfish Hide execution here
                    }
                });
            },
            delay: 500
        });
    });

如何停止隐藏事件的执行？

【问题讨论】：

我以前从未使用过 superfish，但我的猜测是返回 false
@cfs: 只停止当前函数，而不是实际隐藏的父函数。
触发了什么事件？是否鼠标关闭，但光标仍在文本框中？答案可能会有所不同。
@Ted Johnson：是的，它是 DIV 的 mouseOut，同时在其中一个文本输入中仍有光标。

标签： javascript jquery superfish

【解决方案1】：

您需要event.PreventDefault() 之类的东西吗？ http://api.jquery.com/event.preventDefault/

或者，如果这还不足以胜任这项工作，return false; 应该停止一切。

[编辑] 你可以尝试在元素的动画上做一个.stop()

jQuery(function () {
    jQuery('ul.sf-menu').superfish({
        onBeforeHide: function (liElement) {
            $('ul.sf-menu').find('input[type=text], input[type=password]').each(function () {
                if ($(this).is(':focus')) {
                    $(liElement).stop();
                }
            });
        },
        delay: 500
    });
});

或者，如果这没有帮助，您可能必须取消菜单为其li 元素注册的mouseleave 事件。请原谅if中的伪代码

$("ul.sf-menu").on("mouseleave", "li:having(ul)", function(){
        $(this).find('input[type=text], input[type=password]').each(function () {
            if ($(this).is(':focus')) {
                event.preventDefault();
            }
        });
});

【讨论】：

它似乎只是停止了我的onBeforeHide 功能，但实际上继续隐藏菜单项
如果你允许一个参数进入你的函数然后在return false;之前调用$(param).stop();怎么样？
实际的隐藏事件是menu.on("mouseleave.superfish", "li:having(ul)", function(){})，因此您可以尝试使用自己的 mouseleave 函数取消它。

【解决方案2】：

嗯，这是固定的。我不得不更改插件代码本身：

if ($ul.find('input[type=text]:focus, input[type=password]:focus ').length  == 0){

     $ul.stop(true, true).animate(o.animationOut, speed, function () {
     var $this = $(this);                        
     o.onHide.call($this);                        
             });
     }
 else{
      $(this).addClass(o.hoverClass);
     }

这个想法是计算当前具有用户焦点的文本输入的数量，如果有多个，请添加 hoverClass 以使菜单项保持可见。如果没有焦点项目，它将照常进行隐藏。

【讨论】：

【解决方案3】：

我对 superfish 1.7.4 也有同样的需求。这是我的解决方案，使用 Chrome 31、IE 10 和 IE 10 兼容模式 IE 7 测试：

 /*to store the input which gets the focus (mouse click or tab key)*/
    var inputFocused = null;
    $('#mymenu').superfish({
    delay: 500
    , speed: 'fast'
    , disableHI: true
    , onInit: function(){
        var ul = $(this);
        var inputs = ul.find('input[type=text], input[type=password]');
        inputs.each(function(index, elt){
        $(elt).on('click', function(event){
            inputFocused = $(elt);
            event.stopPropagation();
        });
        $(document).on('click', function(event){
                            /*to allow people to choose to quit the menu*/
            inputFocused = null;
        });
        $(elt).on('keyup', function(event){
            inputFocused = $(elt);
            event.stopPropagation();
        });
    });
}
, onHide: function(){
var ul = $(this);
if(inputFocused != null && ul.find(inputFocused).length > 0){
    ul.css('display', 'block');
    inputFocused.focus();
}
}
});

【讨论】：