j查询事件;防止"siblings"相互触发事件

Question

使用jQuery 1.6.1，给定以下HTML:

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

当<div class="control">中的<input> (以后只有control )被聚焦时，<label> (有position: relative; )被激活:

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

Edit:根据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选择器:

使用jQuery测试输入是否有焦点

如果$('.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(使用当前方案):

  • blur: .将动画延迟几分之一秒

  • focus: .stop your existing animation

• 选项2(更改模糊项):

  • 将模糊项更改为div而不是标签