Jquery。不火一個事件是否已經發射另一個

Question

我有這樣的代碼：

$('#foo').on('click', function(e) { 
    //do something 
}); 

$('form input').on('change', function(e) { 
    //do some other things 
)); 

第一和第二事件實際上做同樣的事情用相同的輸入字段，但在不同的方式。問題是，當我點擊#foo元素 - 表單更改元素也會觸發。當輸入內容發生變化時，我需要更改形式以便始終觸發，但當單擊#foo元素時不會觸發。

這就是問題））。這個怎麼做？

UPD：這裏是的jsfiddle代碼：http://jsfiddle.net/QhXyj/1/

Answer 1

會發生什麼事是，當焦點離開的onChange火災#INPUT。在你的情況下，這與點擊按鈕相吻合。嘗試按Tab鍵，然後點擊按鈕。

要處理這種特殊情況，一種解決方案是將呼叫延遲到change事件，足以檢查該按鈕是否在此期間被點擊。在實踐中100毫秒工作。下面的代碼：

$().ready(function() { 

    var stopTheChangeBecauseTheButtonWasClicked = false; 
    $('#button').on('click', function(e) { 
     stopTheChangeBecauseTheButtonWasClicked = true; 
     $('#wtf').html("I don't need to change #input in this case"); 
    }); 

    $('#input').on('change', function(e) { 
     var self = this; 
     setTimeout(function doTheChange() { 
      if (!stopTheChangeBecauseTheButtonWasClicked) { 
       $(self).val($(self).val() + ' - changed!'); 
      } else { 
       stopTheChangeBecauseTheButtonWasClicked = false; 
      } 
     }, 100); 
    }); 
}); 

和提琴 - http://jsfiddle.net/dandv/QhXyj/11/

Answer 2

$('form input').on('change', function(e) { 
    // don't do the thing if the input is #foo 
    if ($(this).attrib('id') == 'foo') return; 

    //do some other things 
)); 

UPDATE

如何：

$().ready(function() { 

    $('#button').on('click', function(e) { 
     $('#wtf').html("I don't need to change #input in this case"); 
    }); 

    $('#input').on('change', function(e) { 
     // determine id #input is in focus 
     if (! $(this).is(":focus")) return; 

     $(this).val($(this).val()+' - changed!'); 
    }); 
}); 

Answer 3

$(function() { 


      $('#button').on('click', function() { 
       //use text() not html() here 
       $('#wtf').text("I don't need to change #input in this case"); 
      }); 

      //fire on blur, that is when user types and presses tab 
      $('#input').on('blur', function() { 
       alert("clicked"); //this doesn't fire when you click button 
       $(this).val($(this).val()+' - changed!'); 
      }); 
     });​ 

這裏是Fiddle

Answer 4

在點擊元素聚焦之前，模糊元素上的更改事件觸發是很自然的。如果你不想使用一個超時（如在Dan提出的那樣，「在輸入被改變之前做一些事情X ms，除非在一個按鈕被點擊之間）」，並且超時是醜陋的 - 你只能執行兩次這些操作。輸入更改後，保存其狀態並執行一些操作。如果然後 - 稍後 - 點擊該按鈕，檢索保存的狀態並執行類似的操作。我想這是你的UI行爲實際需要的，並不是所有的用戶都是那麼快。如果有人離開輸入（例如通過按Tab），然後稍後激活按鈕「獨立」，你是否真的想執行這兩個操作？

var inputval = null, changedval = null; 

$('form input').on('change', function(e) { 
    inputval = this.value; 
    // do some things with it and save them to 
    changedval = … 
    // you might use the value property of the input itself 
)); 

$('#foo').on('click', function(e) { 
    // do something with inputval 
}); 

$('form …').on('any other action') { 
    // you might want to invalidate the cache: 
    inputval = changedval; 
    // so that from now on a click operates with the new value 
});