admin管理员组文章数量:1326129
I have a code like this:
$('#foo').on('click', function(e) {
//do something
});
$('form input').on('change', function(e) {
//do some other things
));
First and second events do actually the same things with the same input field, but in different way. The problem is, that when I click the #foo
element - form change element fires as well. I need form change to fire always when the content of input is changing, but not when #foo
element is clicked.
That's the question )). How to do this?
Here is the code on jsfiddle: /
I have a code like this:
$('#foo').on('click', function(e) {
//do something
});
$('form input').on('change', function(e) {
//do some other things
));
First and second events do actually the same things with the same input field, but in different way. The problem is, that when I click the #foo
element - form change element fires as well. I need form change to fire always when the content of input is changing, but not when #foo
element is clicked.
That's the question )). How to do this?
Here is the code on jsfiddle: http://jsfiddle/QhXyj/1/
Share Improve this question edited Nov 5, 2022 at 13:16 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Nov 11, 2012 at 10:16 Taras BulgakovTaras Bulgakov 5533 gold badges11 silver badges21 bronze badges 5- I agree, click shouldn't trigger change on same element. – charlietfl Commented Nov 11, 2012 at 10:28
-
@charlietfl: It does. If you click somewhere else, focus changes, and when an input element is blurred a
change
might fire – Bergi Commented Nov 11, 2012 at 13:10 - @bergi but really shouldn't be a change on the same input that is clicked is my point. Yes a change on prior input that was in focus – charlietfl Commented Nov 11, 2012 at 13:13
- @charlietfl: OK, yes, but that happens neither. If you click on a focused element, it doesn't fire a change event - it just might change the caret. – Bergi Commented Nov 11, 2012 at 13:36
- @Bergi now that a fiddle with some code was added I can see the situation...originally no code was provided and issue wasn't clear and neither was wording – charlietfl Commented Nov 11, 2012 at 13:39
4 Answers
Reset to default 5What happens is that onChange fires when the focus leaves the #input. In your case, this coincides with clicking on the button. Try pressing Tab, THEN clicking on the button.
To handle this particular case, one solution is to delay the call to the change
event enough check if the button got clicked in the meantime. In practice 100 milisecond worked. Here's the code:
$().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);
});
});
And the fiddle - http://jsfiddle/dandv/QhXyj/11/
It's only natural that a change event on a blurred element fires before the clicked element is focused. If you don't want to use a timeout ("do something X ms after the input was changed unless in between a button was clicked", as proposed by Dan) - and timeouts are ugly - you only could go doing those actions twice. After the input is changed, save its state and do something. If then - somewhen later - the button is clicked, retrieve the saved state and do the something similar. I guess this is what you actually wanted for your UI behaviour, not all users are that fast. If one leaves the input (e.g. by pressing Tab
), and then later activates the button "independently", do you really want to execute both actions?
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
});
$(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!');
});
});
Here's the Fiddle
$('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
How about this:
$().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!');
});
});
本文标签: javascriptDo not fire one event if already fired anotherStack Overflow
版权声明:本文标题:javascript - Do not fire one event if already fired another - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742191214a2430248.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论