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

【问题标题】：Focus a focused input on clicking other div without triggering blur?将重点输入集中在单击其他 div 而不触发模糊？
【发布时间】：2013-09-17 14:55:31
【问题描述】：

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

This should illustrate the problem

    $("#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);
    });

【问题讨论】：

标签： jquery html

【解决方案1】：

如果动画已经 .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/

【讨论】：

它有效，但如果每个焦点有多个类更改，那么我将不得不相应地重新调整选择器。
是的，如果您更改要求，则必须更新代码，但 $("#foo1:not(.active)").addClass("active ohAndAnotherClass",1000); 仍然有效。

【解决方案2】：

使用.clearQueue()

当.clearQueue()方法被调用时，队列上的所有函数未执行的从队列中移除。

$(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

【讨论】：

元素之间是否共享队列？如果还有其他完全不相关的延迟函数在排队，foo1.clearQueue 会清除那些函数吗？
@user1542639 yes clearQueue 会清除之前的所有函数
您的答案效果很好，但我不得不选择其他答案。我很犹豫是否要做一个 clearQueue，因为它可能会无意中删除其他不相关的延迟函数。