jquery - 将重点输入集中在单击其他 div 而不触发模糊？

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);
        });


});

演示

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/