javascript - 如果已经触发了另一个事件，则不要触发一个事件

Question

我有这样的代码:

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

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

第一个和第二个事件实际上对相同的输入字段执行相同的操作，但方式不同。问题是，当我单击 #foo 元素时，表单更改元素也会触发。我需要在输入内容发生变化时始终触发表单更改，而不是在单击 #foo 元素时触发。

这就是问题 ))。如何做到这一点？

这是 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);
    });
});

还有 fiddle - http://jsfiddle.net/dandv/QhXyj/11/