Stop multiple jquery events

Asked

Viewed 268 times

0

I have the following situation:

$('input[name=buscar]').on( "keydown keypress keyup", function( event ) {
    console.log('foi');
});

Every time I type, all 3 events are triggered. How do I make only 1 be triggered instead of all three? I mean, I hit the button, triggered the first event, once I should do it and that’s it...

javascript jquery

  • If identifying the added event can be as mentioned below, if to perform only one specific event remove the others.

  • @Gabrielrodrigues The way you quoted it right. But there was one time, I believe I used some function, where she stopped the other events, so I don’t need to check event by event, he fired once, and didn’t perform the others. But I don’t remember the way I did it. ATT

  • If you don’t have a specific case becomes difficult to help, these three events work "almost" at the same time, maybe you should analyze which event is ideal and use it

  • Why do you have the 3 events associated with this input?

  • @Sergio Years ago I had problems using only 1 event, from then on I always use the three... 'Cause there’s no way you’re gonna miss an event...

  • @abcd ok, but adding the 3 weighs in the performance of the browser, and generates problems like this one you are having. You should always add only what you need to the functionality you need. In some cases you may need more than one. What is the functionality you are looking for?

  • @Sergio Regarding today, It generates some visualization problems, minimums that will not interfere. But in the past I already had problems when I used ajax, because it requests 3 times... What the user answered solves. But years ago, I have in mind that I solved this same problem in a more "elegant" way, where if I had fired any of the 3 events, he would not repeat the others... But for having doubt, I don’t remember what I did back then. ATT

Show 2 more comments

3 answers

2

I believe it is performing because it is three different events but they would be executed at "the same time". I will explain:

keyup(): the event occurs when the key returns to its original position on the keyboard (example: when you release the key).

keydown(): the event occurs when the key is pressed.

keypress(): the event occurs when the key is pressed.

The difference between keydown() and keypress() is that the second is not captured when the Ctrl, alt or shift keys are pressed.

So, if you press a key, you will go through the 3 "states" shown above, to fire only one, you could use only one of the functions and remove the others.

1

You can take the event type and put in a condition to separate where each event:

$('input[name=buscar]').on("keydown keypress keyup", function(event) {
  if (event.type === 'keydown') {
    console.log('1');
  } else if (event.type === 'keypress') {
    console.log('2');
  } else if (event.type === 'keyup') {
    console.log('3');
  }
});

Or chain several events.

$('input[name=buscar]').on("keydown", function() {
  console.log('1');
}).on('keypress', function() {
  console.log('2');
}).on('keyup', function() {
  console.log('3');
});

1

As you are using these events in an input, I believe the code below is the simplest way to solve your problem:

$('input[name=buscar]').change( function() {
  console.log('foi');
});

  • Your option might work... But in my specific situation, with all the code, there have been some unwanted changes to the events. ATT

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.