1

我正在使用 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});
    }

});

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

4

2 回答 2

1

只需检查活动元素：

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

function makeShort(){
    if (!$("#myForm").find(':focus').length) {
        $("#myForm").hide('fast');
        $(this).css({"height":50});
    }
}
于 2011-11-23T02:54:40.027 回答
0

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

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

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

于 2011-11-23T03:01:45.717 回答