如何防止多次激發BLUR事件？

我有某些文本輸入字段，如果用戶更改一個值，然後模糊遠離該文本字段，js將觸發和ajax請求更新數據庫中的該值。問題是，我寫了一個測試，以得到這樣一個觸發事件，並且我注意到內部「模糊」事件我通常標籤後二到五倍之間觸發了輸入字段：如何防止多次激發BLUR事件？

$('input[type=text]').on('input propertychange paste', function() { 
     $(this).on('blur', function() { 
      console.log('blur'); 
     }); 
    });

即使我在捕捉它之後立即關閉模糊事件處理程序，它仍會觸發兩到三次。我如何才能讓這一切只發生一次？

來源

2015-05-18 Joel Joel Binks

它多次觸發的原因是因爲每當您更改所述元素的值時，都會在輸入元素上放置另一個模糊處理器副本。 – thewatcheruatu

那麼，爲什麼你在''input propertychange paste''事件裏綁定'blur'事件？ –

，因爲我只想在該字段被編輯並且用戶已經標籤出該字段時觸發該事件。如果我剛剛趕上第一個活動，任何時候我輸入一封新信都會觸發。 –

只要保持一個hasFired布爾軌道：

var hasFired = false; 
$('input[type=text]').on('input propertychange paste', function() { 
    $(this).on('blur', function() { 
     if(!hasFired){ 
      hasFired = true; 
      console.log('blur'); 
     } 
    }); 
});

實際上，這裏真正的問題是，你的blur事件多次結合。您可以使用布爾像上面，以防止：

var isBound = false; 
$('input[type=text]').on('input propertychange paste', function() { 
    if(!isBound){ 
     isBound = true; 
     $(this).on('blur', function() { 
      console.log('blur'); 
     }); 
    } 
});

來源

2015-05-18 19:31:14 Cerbrus

謝謝。這部分工作。我可以編輯一個字段一次，它會觸發模糊一次。但是如果我需要重新編輯相同的字段，模糊不會出現，原因很明顯。我能做的就是在ajax發佈.done事件後將其設置爲false。 –

@Joel：我編輯了我的帖子，第二個選項應該對你更好。 – Cerbrus

另一個解決方案是是創建一個類已通過該事件綁定了這些元素。

$('input[type=text]').on('input propertychange paste', function() { 
    if(!$(this).hasClass("bound")) { 
     $(this).on('blur', function() { 
     $(this).addClass("bound"); 
     console.log('blur'); 
     }); 
    } 
});

來源

2015-05-18 19:34:49

如何防止多次激發BLUR事件？

回答

相關問題