jQuery tir événement de clic sans un clic

Question

Eh bien, c'est un peu ce qui se passe.

$('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle(); 
$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function(event){ 
    if (event.keyCode === 13) { 
     openDropdown($(this)); 
    } 
}).click(function(){ 
    openDropdown($(this)); 
}); 

function openDropdown (element){ 
    element.parents('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle(); 
    console.log($(this)) 
} 

Lorsque je clique sur le bouton déroulant, la fonction openDropdown est exécutée une fois, mais quand je Tab mon chemin vers le bouton et appuyez sur Entrée, la fonction est appelée deux fois. Je suppose que cela a quelque chose à voir avec le chaînage, mais j'avoue que je suis nouveau dans ce domaine et que je ne comprends pas complètement les modèles de conception de jQuery. Je pourrais de cource appeler la fonction deux fois dans keydown gestionnaire et cela résoudrait le problème, mais .. vous savez :)

Pourriez-vous s'il vous plaît expliquer ce qui ne va pas avec le code et ce qui provoque un tel comportement?

Answer 1

Il s'agit des spécifications d'interactions utilisateur html 5. Si vous regardez le HTML spec for elements with a tabIndex, vous verrez qu'ils mentionnent que pour tout élément avec un index de tabulation, la touche d'entrée provoque un événement click.

Je suppose que c'est ce qui provoque ce comportement. Vous pouvez l'essayer sur un navigateur plus ancien (non compatible html 5) pour tester si c'est le cas.

Modifier (comme demandé par un poster): Le answer given by @Terry fournit un moyen de résoudre le problème que vous rencontrez. L'utilisation de "preventDefault" de jquery sur l'événement l'empêchera d'être frappé deux fois lorsque vous frapperez entrée.

Answer 2

Vous pouvez déclencher l'événement cliquez sur keydown en utilisant: $(this).trigger('click'); et la prévention de l'action par défaut sur keydown:

$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function (e) { 
    if (e.keyCode === 13) { 
     $(this).trigger('click'); 
     e.preventDefault(); 
    } 
}).click(function() { 
    openDropdown($(this)); 
}); 

est ici un violon preuve de concept: http://jsfiddle.net/yTuR3/