jQuery evento di attivazione scatto senza un clic

Question

Beh, questo è un po 'quello che succede.

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

quando clicco sul pulsante a discesa, openDropdown funzione viene eseguita una volta, ma quando ho il mio modo Tab al pulsante e premere invio, la funzione viene chiamata due volte. Suppongo che abbia qualcosa a che fare con il concatenamento, ma ammetto di essere nuovo in questo e di non comprendere appieno i modelli di design di jQuery. Potrei chiamare la funzione due volte nel gestore keydown e questo risolverebbe il problema, ma .. lo sai :)

Potresti spiegare cosa c'è di sbagliato nel codice e cosa causa questo comportamento?

Answer 1

Questo dipende dalle specifiche di interazione utente 5 in HTML. Se dai un'occhiata allo HTML spec for elements with a tabIndex scoprirai che menzionano che per qualsiasi elemento con un indice di tabulazione il tasto invio causa un evento click.

Sospetto che sia ciò che sta causando questo comportamento. Puoi provare su un browser più vecchio (non compatibile con HTML 5) per verificare se questo è il caso.

Modifica (come richiesto dal poster): answer given by @Terry fornisce un modo per risolvere il problema riscontrato. L'uso di "preventDefault" di jquery sull'evento interromperà il doppio colpo quando premi Invio.

Answer 2

È possibile attivare l'evento click sul keydown utilizzando: $(this).trigger('click');, e il impedendo l'azione di default su keydown:

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

Ecco un proof-of-concept violino: http://jsfiddle.net/yTuR3/