Question

我有一个带输入文本字段的div容器。我在这个输入的焦点/模糊事件监听器上附加了一个聚焦和聚焦动画。但是，我希望输入的行为方式使得当我单击此div容器上的任何位置时，它与关注该输入本身相同（因此如果输入已经聚焦，则不会重新聚焦）。

    $("#foo1").click(function() {
       //WARNING: #foo2 will blur first THEN focus 
       $("#foo2").focus();
    });

    $("#foo2").focus(function() {
        $("#foo1").addClass("active",1000);
    });
    $("#foo2").blur(function() {
        $("#foo1").removeClass("active",1000);
    });

Answer 1

使用.clearQueue()

调用.clearQueue（）方法时，队列中的所有函数尚未执行的内容将从队列中删除。

<强> JS

$(function(){
    $("#foo1").click(function() {
        //WARNING: #foo2 will blur first THEN focus 
        $("#foo2").focus();
    });

        $("#foo2").focus(function() {
            $("#foo1").clearQueue().addClass("active",1000);
        });
        $("#foo2").blur(function() {
            $("#foo1").clearQueue().removeClass("active",1000);
        });


});

DEMO

Answer 2

如果动画已经是.active

，请不要重新应用动画

$(function(){
    $("#foo1").click(function() {
        //WARNING: #foo2 will blur first THEN focus 
        $("#foo2").focus();
    });

    $("#foo2").focus(function() {
        //dont reapply
        $("#foo1:not(.active)").addClass("active",1000);
    });
    $("#foo2").blur(function() {
        $("#foo1").removeClass("active",1000);
    });

});

请参阅：http://jsfiddle.net/g5c7d/6/

将焦点输入聚焦到单击其他div而不会触发模糊？

2 个答案: