jQuery стрельбы по событию без щелчка

Question

Ну, вот что происходит.

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

При нажатии на кнопку с, openDropdown функция выполняется один раз, но когда я Tab мой путь к кнопке и нажмите клавишу ввода, функция вызывается дважды. Угадайте, что имеет какое-то отношение к цепочке, но я признаю, что я новичок в этом и не совсем понимаю шаблоны дизайна jQuery. Я мог бы использовать функцию дважды в обработчике keydown, и это решило бы проблему, но .. вы знаете :)

Не могли бы вы объяснить, что не так с кодом и что вызывает такое поведение?

Answer 1

Это относится к спецификациям пользователей html 5. Если вы посмотрите на HTML spec for elements with a tabIndex, вы обнаружите, что они указывают, что для любого элемента с индексом вкладки ключ ввода вызывает событие клика.

Я подозреваю, что это вызывает такое поведение. Вы можете попробовать его в более старом (не-html 5-совместимом) браузере, чтобы проверить, так ли это.

Редактировать (по запросу плаката): answer given by @Terry обеспечивает способ устранения проблемы, возникшей у вас. Использование jQuery «preventDefault» в событии остановит его, когда он попадет дважды, когда вы нажмете enter.

Answer 2

Вы можете вызвать событие щелчка на KeyDown с помощью: $(this).trigger('click'); и предотвращения действия по умолчанию, на KeyDown:

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

Вот доказательство правильности концепции скрипка: http://jsfiddle.net/yTuR3/