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(...)你可以寫你想要的。我沒有寫你的代碼（動畫），因爲它不是主題。

我希望它會有幫助。