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 기능은 한 번만 실행되지만, 버튼을 언론에 난 탭 내 방식이 입력 할 때 함수가 두 번 호출됩니다. 추측에는 연쇄와 관련이있는 것으로 추측됩니다. 그러나 저는이 점을 처음 접했고 jQuery 디자인 패턴을 완전히 이해하지 못한다는 것을 인정합니다. 나는 keydown 핸들러에서 함수를 두 번 호출하여 문제를 해결할 수 있지만, 알 수 있습니다. :)

코드의 문제점과 그 원인을 설명해 주시겠습니까?

Answer 1

이것은 html 5 사용자 상호 작용 사양에 미치지 않습니다. HTML spec for elements with a tabIndex을 살펴보면 탭 인덱스가있는 요소의 경우 Enter 키가 click 이벤트를 발생시키는 것을 알 수 있습니다.

나는 그것이이 문제의 원인이라고 생각합니다. 이런 경우가 아닌지를 테스트하기 위해 이전 버전의 (HTML 5가 아닌) 브라우저에서 시도해 볼 수 있습니다.

편집 (포스터 요청) : answer given by @Terry은 보유한 문제를 해결할 수있는 방법을 제공합니다. 이벤트에 jquery의 "preventDefault"를 사용하면 enter 키를 두 번 눌렀을 때 이벤트가 중지됩니다.

Answer 2

사용를 keyDown에 클릭 이벤트를 트리거 할 수 있습니다 $(this).trigger('click');를하고를 keyDown시 기본 동작 방지 : http://jsfiddle.net/yTuR3/