Keypress et Keydown génèrent un comportement différent

Question

J'essaie de créer un popup div en appuyant sur la touche entrée, tandis que le div contient un bouton (que je script pour se concentrer quand il se déclenche) qui fermera la div quand vous appuyez sur Entrée à nouveau. Je reçois la touche d'entrée de liaison keypress et keydown, finissent par avoir des résultats différents.

Reliure « keypress »

choses fonctionnent correctement, avec d'abord saisir les incendies clés une boîte de pop-up et une autre touche Entrée pour fermer la boîte de pop-up.

Référez-vous à JSFiddle.

Reliure « KEYDOWN »

Cela ne fonctionne pas correctement, comme il se déclenche et la boîte immédiatement rejeter popup (que vous ne verrez pas) avec une seule touche entrée.

Référez-vous à JSFiddle.

Ma question est de savoir pourquoi le clavier générerait un comportement étrange, c'est comme tirer deux fois la clé d'entrée pour moi, mais la vérité ce n'était pas. Si je supprime le focus du bouton(), cela fonctionnera correctement. Cela m'a intrigué.

Testé avec firefox et chrome.

Answer 1

Vous réétablissez l'événement click chaque fois que la fenêtre s'ouvre, de sorte que chaque fois que vous cliquez sur le bouton de fermeture, il se déclenche plusieurs fois, ce qui provoque un comportement inattendu.

Par exemple:

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

Ce code signifie que chaque fois que vous créez une nouvelle instance de Popup, chaque $ ('# bouton OK') qui existe aura un autre événement click lié. En ce qui concerne la raison pour laquelle il se ferme immédiatement lorsque vous utilisez keydown vs keypress, cela est dû au fait que le moment où le popup est ouvert, vous avez mis le focus sur le bouton.

Les deux événements clés fonctionnent différemment (déclenchement à des moments légèrement différents au cours du processus de clé). Il semble qu'avec le clavier, vous changiez la mise au point au milieu de l'action réelle (en appuyant sur le bouton du clavier) qui continue alors et déclenche le clic focalisé. La suppression de la mise au point arrête le comportement étrange du double déclenchement car vous ne liez plus un autre événement click.

Je vous suggère de changer votre événement click:

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

Je voudrais aussi suggérer regarder jQuery's on event au lieu d'utiliser en direct.