jQuery wypalanie kliknij wydarzenie bez kliknięcia

Question

Cóż, to coś, co się dzieje.

$('.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)) 
} 

Kiedy klikam przycisk rozwijanej openDropdown funkcja jest wykonywana raz, ale kiedy mój sposób Tab do przycisku i naciśnij klawisz Enter, funkcja jest wywoływana dwukrotnie. Zgadnij, że ma to coś wspólnego z łańcuchem, ale przyznaję, że jestem na tym początku i nie w pełni rozumiem wzorce projektowe jQuery. Mógłbym z cource zadzwonić do funkcji dwa razy w obsłudze keydown i to rozwiązałoby problem, ale .. wiesz :)

Czy mógłbyś wyjaśnić, co jest nie tak z kodem i co powoduje takie zachowanie?

Answer 1

Sprowadza się to do specyfikacji interakcji użytkownika html 5. Jeśli spojrzysz na HTML spec for elements with a tabIndex, zauważysz, że wspominają one o tym, że dla każdego elementu z indeksem tabulatorów klawisz Enter powoduje kliknięcie.

Podejrzewam, że to jest przyczyną tego zachowania. Możesz wypróbować to na starszej (niezgodnej z HTML 5) przeglądarce, aby sprawdzić, czy tak jest.

Edytuj (zgodnie z postulatem z plakatu): answer given by @Terry zapewnia sposób na rozwiązanie problemu, który masz. Użycie przez jquery opcji "preventDefault" w przypadku zdarzenia spowoduje, że dwukrotne naciśnięcie klawisza Enter spowoduje zatrzymanie go.

Answer 2

można wywołać zdarzenie click na keydown używając: $(this).trigger('click'); i zapobiegania domyślną akcję momencie keydown:

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

Oto proof-of-concept skrzypce: http://jsfiddle.net/yTuR3/