jQuery事件;防止 “兄弟姐妹”，从触发事件eachothers

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>（经由标签或鼠标点击）的事件当然还是火，而<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

两个选项，我能想到的：

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

  • 模糊：由第二

  • 的一小部分.delay动画重点：。停止现有的动画

• 选项2（变模糊项）：

  • CHAGE模糊项目在您的股利，而不是标签的

Answer 5

在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 当你将焦点切换到input在另一个.contor，文字“专注”登录到控制台，如果你是住在同一个.control - 没有。 而不是console.log(...)你可以写你想要的。我没有写你的代码（动画），因为它不是主题。

我希望它会有帮助。