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

当焦点离开#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/