이것은 다소 이상한 것이기 때문에 나는 분명히 뭔가를 놓치고 있거나 이러한 이벤트가 브라우저에서 어떻게 구현되는지에 대한 결함입니다.키 조합 이벤트 (다른 키의 경우)가 실행될 때 keydown (반복)이 중단됩니다.
먼저이 사례가 분리 된 사례를 제공하기 전에 제시된 예제 시나리오를 요약 해 보겠습니다.
화살표 키는 플레이어를 이동하는 데 사용됩니다 (handleKeyDown 함수는 키가 페이지의 아무 곳이나 칠 때마다 발생합니다). 마찬가지로 키가 릴리스 될 때마다 다른 함수가 시작됩니다 (handleKeyUp).
왼쪽 키를 누른 상태에서 handleKeyDown 함수가 반복적으로 트리거됩니다 (실제로 예상 한 바가 무엇인지, 이름이 암시하는 바를 무시한다고 생각되지만 그렇다고 모든 브라우저에서 정상적인 동작입니다. 나는 당신이 알고 있다고 확신한다).
다음과 같이됩니다. 플레이어가 그 방향으로 걷는 방향을 잡고 있습니다. 그런 다음 방향 키를 누른 상태에서 계속 걸을 때 숫자 키 (단축 키 항목 용)를 누릅니다. 여기서 일어나는 일은 단축키 항목의 숫자 키를 놓으면 플레이어 이동 반복이 멈 춥니 다!
<html>
<head>
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
var log = {};
var keyState = {};
var keyCount = {'down': 0, 'up': 0};
window.addEventListener('keydown', handleKeyDown, false);
window.addEventListener('keyup', handleKeyUp, false);
function handleKeyDown (e)
{
keyState[e.keyCode] = true;
keyCount.down++;
log.prepend(" ["+e.keyCode+"] ");
return false;
}
function handleKeyUp (e)
{
keyState[e.keyCode] = false;
keyCount.down++;
return true;
}
$(function(){log = $('#log');});
</script>
</head>
<body>
<div id='debug'></div>
<div id='log'></div>
</body>
또한 여기 시도 할 수 있습니다 : : 페이지에
을 눌러 어떤 키를 나는이 문제의 아주 작은 고립 된 예를 작성했습니다
페이지에 keyCode가 표시됩니다. 키를 누르고 있으면 키 코드가 반복해서 반복됩니다.
초기 키를 계속 누르고있는 동안 다른 키를 누르면 동작이 비정상적으로됩니다. 그 최근의 키가 릴리즈되면, 첫 번째 키에서 반복이 멈 춥니 다. 흥미롭게도, 예제를 시도하고 하나의 키를 누른 상태에서 두 번째 키를 누르고 두 번째 키를 놓는 대신 첫 번째 키를 놓으면 두 번째 키가 계속 반복됩니다.
그래서 계속 진행되는 것처럼 보이는 것은 keyup 이벤트가 발생하면 이전 키에서 실행 된 keydown 이벤트에서 반복을 종료하는 것입니다.
나는 두 가지 이벤트 처리 함수에서 false를 반환하는 것부터 시작하여 true를 반환하고 keydown 대신 keypress를 시도하고 키 상태를 저장하고 버튼의 키스톤이 여전히 true 인 경우 계속되는 동작을 시도했습니다. 키 다운이 시작되면 적극적으로 전파하는 keydown 이벤트가 종료된다는 것입니다. 나는 JavaScript Madness: Keyboard Events을 통해 읽었으며이 특정 종류의 행동에 대해서는 아무것도 보지 못했습니다.
키 이벤트를 구현할 때 설계상의 결함입니까? 아니면 누락 되었습니까? 크롬에서 IE & Firefox와 동일한 문제가 발생합니다.
조언이나 의견이 있으십니까?
브라우저 컨텍스트 외부에서 이것을 검사하지 않으면 너무 어리 석습니다. 절대적으로 옳다. 이 같은 동작은 메모장 ++에서 발생합니다. 결국 나는 다른 접근법을 취해야하는 것처럼 보입니다. 문제의 해명을 가져 주셔서 감사합니다. :) – Lev
당신은 아마 타이머 기반 솔루션의 일종을 설정해야 할 것입니다. 시작하려면 http://bonsaiden.github.com/JavaScript-Garden/#other를 참조하십시오. –