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

当焦点离开#input时，onChange会触发。在您的情况下，这恰好与单击按钮。尝试按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

在点击的元素聚焦之前，模糊元素上的更改事件触发是很自然的。如果您不想使用超时（“输入更改后的X ms，除非在单击按钮之间执行”，如Dan所建议的那样） - 并且超时很难 - 您只能执行两次这样的操作。输入更改后，保存其状态并执行某些操作。如果那时 - 稍后 - 某个按钮被单击，则检索已保存的状态并执行类似的操作。我想这是你真正想要的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
});

Answer 3

$('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
));

<强>更新

这个怎么样：

$().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 4

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

jQuery的。如果已经解雇了另一个事件，请不要触发一个

4 个答案: