Question

我正在使用jQuery插件hoverIntent来扩展/缩短包含表单的div。如下所示，当div很高时，会显示表单。

如果任何表单字段具有焦点，如何阻止onMouseOut / makeShort触发？

$(document).ready(function(){

    var config = {    
         over: makeTall, // function = onMouseOver callback (REQUIRED)    
         timeout: 650, // number = milliseconds delay before onMouseOut    
         out: makeShort // function = onMouseOut callback (REQUIRED)   
    };

    $("#mydiv").hoverIntent( config );

    function makeTall(){ 
            $(this).css({"height":100});
            $("#myForm").show('fast');
    }

    function makeShort(){
            $("#myForm").hide('fast');
            $(this).css({"height":50});
    }

});

如果还有另一个更强大的悬停事件插件，我也愿意接受建议。

Answer 1

只需检查有效元素：

function makeTall(){ 
    $(this).css({"height":100});
    $("#myForm").show('fast');
}

function makeShort(){
    if (!$("#myForm").find(':focus').length) {
        $("#myForm").hide('fast');
        $(this).css({"height":50});
    }
}

Answer 2

为什么不使用jQuery的mouseleave和mouseenter方法。

mouseleave事件与mouseout处理事件冒泡的方式不同。如果在此示例中使用了mouseout，那么当鼠标指针移出Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开它所绑定的元素时触发其处理程序，而不是后代。因此，在此示例中，处理程序在鼠标离开外部元素时触发，而不是内部元素。

示例：http://jsfiddle.net/TeYNw/2/

如果表单字段具有焦点，如何取消绑定/停止onMouseOut事件，在hoverIntent jQuery插件中？

2 个答案: