How to stop Keyup event from triggering twice

keydown event firing multiple times
stopimmediatepropagation
stoppropagation
jquery prevent multiple click events
jquery ::after click event
stoppropagation vs preventdefault
cancel keypress event
stoppropagation jquery

Console.log is printed twice. I have tried using e.stopPropagation(),e.preventDefault() and .stop(). It does not work. The console.log should trigger only once

$('html').keyup(function (e) {
    if (e.keyCode == 46) {
        console.log("delete press");
        e.stopPropagation();
        e.preventDefault();
    }
});

I had a similar problem a while back. I ended up using $.unbind() and $.bind(). I would first call $.unbind() to remove any callback functions to the event that were potentially already bound to event. Then, I would call $.bind() on the event so it can do what I want it to do.

$('html').unbind('keyup');
$('html').bind('keyup', function (e) {

#7687 (Enter keypress event registers multiple times) – jQuery, The keyup and keypress events sometimes catch duplicates if you press enter twice really fast. this will allow duplicates if I press enter really fast twice. Where accidentally triggering keypress multiple times, it is not surprising that any code  I'm having trouble with the logic in my code where the PreviewKeyDown Event is firing multiple times before the KeyUp Event is triggered. For example: I press two keys very quickly but NOT at the exact same time. However, my KeyUp event has some logic that needs to be completed in time before the next PreviewKeyDown should be fired.

You probably need to debounce the event.

You can use something like lodash to do this easily, or you can roll your own if you want to learn how it works.

function handler(e) {
    if (e.keyCode == 46) {
        console.log("delete press");
        e.stopPropagation();
        e.preventDefault();
    }
}
$('html').keyup(lodash.debounce(handler, 250));

250 here is the number of milliseconds to debounce an event, also notice how the event is wrapped.

The documentation for all the options can be found here: https://lodash.com/docs/4.17.11#debounce

event.stopPropagation(), This method works for custom events triggered with trigger() as well. Note that this will not prevent other handlers on the same element from running. When the user keeps a key depressed, the keydown and keypress events, if applicable, should fire continuously. The 'd' character key: should always repeat. The arrow-left key: should always repeat. The left Shift key: this key repeats on Windows 7 (except in Opera), but not on Mac.

Detaching the event with off() also works

 $('html').off('keyup').on('keyup',function (e) {
  if (e.keyCode == 46) {
    console.log("delete press");
    e.stopPropagation();
    e.preventDefault();
  }
});

OR

execute the event handler only once using one() as

$('html').one('keyup',function (e) {
if (e.keyCode == 46) {
    console.log("delete press");
    e.stopPropagation();
    e.preventDefault();
}

});

Events and Event Delegation, keyup .keyup(). mouseover .mouseover Once you've "bound" an event handler to an element, you can trigger that event handler using jQuery as well. 1. $( 'li' ).​trigger( The right way to prevent the default behavior of an event is to call the . Use the @on {EVENT}:preventDefault directive attribute to prevent the default action for an event. When a key is selected on an input device and the element focus is on a text box, a browser normally displays the key's character in the text box.

Enter key fires an Event twice - events - html, Are keydown and/or keypress events cancellable (can you cancel them to prevent the corresponding text from being entered)? Edit: FYI, the jQuery validation plug-  The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events.

Event.preventDefault(), The Event interface's preventDefault() method tells the user agent that if the As noted below, calling preventDefault() for a non-cancelable event, such as one dispatched via EventTarget. First, listen for keypress events: Definition and Usage. The onkeyup event occurs when the user releases a key (on the keyboard). Tip: The order of events related to the onkeyup event: onkeydown; onkeypress

KeyboardEvent.key, Note that some other implementations may fire keypress event if supported. Cancel the default action to avoid it being handled twice event. Note that modifier keys are different from regular keys and when used with keyup events, they have to be pressed when the event is emitted. In other words, keyup.ctrl will only trigger if you release a key while holding down ctrl. It won’t trigger if you release the ctrl key alone. If you do want such behaviour, use the keyCode for ctrl

Comments
  • "console.log will be only trigger once" Then how do you know the event is triggered twice? Also, stopping event propagation on HTML element does nothing, an event can't bubble out of the document anyway.
  • Not enough information. Posted code can't behave like you described.
  • Can you try .unbind and then .bind. It could be that the event has been bound twice?
  • The provided code by OP won't fire twice, something else is missing.
  • The problem here is, that the question doesn't represent any reproducable problem, please don't make speculations in answers.
  • @Teemu a hardware triggered event is firing twice needing a debounce isn't a speculation, it is a common problem.
  • @Durga His english needs a bit of help if you read the question he says the console log fires twice and the last line he means he wants it to only fire once.
  • Then most likely the actual hardware issue is a heavy finger on the keyboard, or a dirty keyboard (keyup event is not repeated), those are something you can't programmatically fix. You might be correct with the translation of the last sentence, though.