我有这样的代码:
$('#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/
最佳答案
发生的事情是当焦点离开#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/
关于javascript - 如果已经触发了另一个事件,则不要触发一个事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13330229/