CODEWITHSUNDEEP
javascript
TonyTakeshi
TonyTakeshi

Reputation: 5929

Keypress and Keydown generate different behavior

I am trying to create to popup div when pressing enter key, while the div contains a button (that I script to focus when it fired up) that will close the div when you press enter again. I receive the enter key from binding keypress and keydown, end up having different results.

Binding 'keypress'

Things work properly, with first enter key fires up a popup box and another enter key to dismiss the popup box.

Refer this JSFiddle.

Binding 'keydown'

This doesn't work correctly, as it fires up and dismiss the popup box immediately (which you won't see) with only one enter key.

Refer this JSFiddle.

My question is why would keydown generate odd behavior, it is like firing enter key twice for me, but the truth it wasn't. If I remove the button focus(), it will works correctly. That's puzzled me.

Tested with firefox and chrome.

Upvotes: 1

Views: 298

Answers (1)

temporalslide
temporalslide

Reputation: 947

You're rebinding the click event every single time the popup opens, so each time you click the close button it'll fire it multiple times which will cause unexpected behaviour.

Eg:

var Popup = function(){
    $('#ok-button').live('click',function(){
        $('#popup').remove();
    });                
};

This code means every time you create a new Popup instance, every single $('#ok-button') that exists will have another click event bound to it.

As for the reason why it immediately closes when you use keydown vs keypress, that's due to the fact that the moment the popup is opened you've set the focus to the button.

The two key events work differently (firing at slightly different times during the key process). It appears that with keydown, you're changing the focus in the middle of the actual action (pressing the button on the keyboard) which then continues and triggers the focused click.

Removing the focus stops the weird double trigger behaviour because you're no longer binding another click event.

I'd suggest changing your click event:

$('#ok-button').live('click', function(){
    $('#popup').remove();
}); 
var Popup = function(){
    // Whatever               
};

I'd also suggest looking at jQuery's on event instead of using live.

Upvotes: 2

Related Questions