jQuery 事件；防止“兄弟姐妹”触发彼此的事件

Question

使用 jQuery 1.6.1，假设我有以下 HTML：

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
</div>

当<div class="control">（以下仅control）中的<input> 被聚焦时，<label>（与position: relative;）动画： p>

$('.control :input').bind('focus', function(e){
    $(this).prevAll('label').animate({
        'left': '-50px'
    }, 250);
});

当模糊时，<label> 返回：

.bind('blur', function(e){
    $(this).prevAll('label').animate({
        'left': '0px'
    }, 250);
});

但是，如果 <input> 元素之一获得焦点，然后随着焦点切换到同一 control 内的另一个 <input> （通过 Tab 或鼠标单击）当然，事件仍然会触发，<label> 会来回动画。

如何仅在给定control 内的所有输入失去焦点时才强制触发模糊事件？

Answer 1

编辑：根据 OP 提供的更多输入更新了答案。

如果隐藏标签稍微延迟一秒钟就可以了，那么您可以使用 setTimeout/clearTimeout 组合。 比如：

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>
<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

    <script type="text/javascript"> 
        var timeoutIds = [];
            $('.control').each(function(index, el){
                $(':input', el).bind('focus', function(e){     
                        clearTimeout(timeoutIds[index]);
                        $(this).prevAll('label').animate({        
                                'left': '-50px'     
                        }); 
                });

                $(':input', el).bind('blur', function(e){     
                        var that = this;
                        timeoutIds[index] = setTimeout(function(){
                            $(that).prevAll('label').animate({        
                                    'left': '0px' 
                            }); 
                    }, 500);
                });
            });
    </script>

工作示例：http://jsfiddle.net/Tn9sV/2/

Answer 2

在您的模糊回调中，我会查看类似于 1.6 中引入的 :focus 选择器：

Using jQuery to test if an input has focus

如果$('.control :focus).length > 0 则return 停止运行的函数。

Answer 3

我过去通过将新焦点绑定到文档或表单并让它触发标签返回来实现类似的效果，而不是将模糊绑定到输入。

Answer 4

在blur 回调中，您可以使用此$("input:focus").length 检测现在是否有任何输入元素被聚焦。如果length>0比不动画

更新

这段代码呢？

    var control;
    var inTheSameControl=false;
    $('.control :input').bind('focus', function(e){
        if(control)
        {
            if(control.find(this).length>0)
                inTheSameControl=true;
            else
                inTheSameControl=false;
        }
        control=$(this).parent();
        if(!inTheSameControl)
        {
            console.log('focus');
        }
    });
    $('.control :input').bind('blur', function(e){
        if(!inTheSameControl)
        {
            console.log('blur');
        }
    });

它适用于多个div.control 当您将焦点切换到另一个.contor 中的input 时，文本“焦点”会登录到控制台，如果您留在同一个.control - 不会。 你可以写你想要的，而不是console.log(...)。我没有写你的代码（动画），因为它不是主题。

希望对你有帮助。

Answer 5

我能想到的两个选项：

• 选项 1（使用当前方案）：

  • 模糊：将动画延迟几分之一秒

  • 焦点：.停止您现有的动画

• 选项 2（更改模糊项）：

  • 将模糊项更改为在您的 div 上而不是标签上