JavaScript에서 동시에 여러 키 누름 감지
JavaScript에서는 다음 단계를 통해 여러 키를 동시에 눌렀는지 확인할 수 있습니다.
- "맵"이라는 JavaScript 배열을 생성하거나 object.
-
keydown 및 keyup 이벤트 리스너 내에서 "map" 배열을 조작합니다.
- 키를 누를 때(keydown 이벤트) 해당 키 코드를 설정합니다. 또는 배열의 키를 "true"로 설정합니다.
- 키를 놓으면(keyup 이벤트) 해당 키 코드나 배열의 키를 다음으로 설정합니다. "false."
- "map" 배열을 활용하여 해당 키 조합을 평가하여 특정 키 조합을 확인합니다. 값.
예
// Create an array to track key presses
var map = {};
// Add event listeners for keydown and keyup events
document.addEventListener("keydown", function(e) {
map[e.keyCode] = true;
});
document.addEventListener("keyup", function(e) {
map[e.keyCode] = false;
});
// Check for key combinations using the map array
if (map[17] && map[16] && map[65]) {
console.log("Ctrl + Shift + A pressed");
}
사용
- 이 스크립트는 맵 배열을 다음으로 초기화합니다. 모니터 키를 눌렀을 때.
- 사용자가 모니터 키를 눌렀을 때 "A" 키, "map[65]" 요소는 "true"로 설정됩니다(Ctrl의 경우 17, Shift의 경우 16, A의 경우 65). map = { 17: true, 16: true, 65: true }.
- 사용자가 여러 키를 누르면 배열의 해당 요소가 그에 따라 설정됩니다.
- 특정 키 조합을 감지하려면 다음을 참조하세요. "Ctrl Shift A" 조합을 확인하는 스크립트 내 "if" 조건.
중요 사항
- keyCode 지원 중단: 이벤트 .keyCode는 이제 더 이상 사용되지 않습니다. 대신 event.key와 같은 대체 접근 방식을 사용해야 합니다.
- 이벤트 처리 고려 사항: 사용 중인 이벤트 처리 메커니즘(예: element.onkeydown 및 element.addEventListener)에 유의하세요.
- 브라우저 기본값: 특정 키 조합에는 기본 브라우저 작업이 있을 수 있습니다. 이러한 작업을 방지하려면 event.preventDefault()를 사용하거나 false를 반환하는 것이 좋습니다.
- return 또는 e.preventDefault()를 사용하여 이벤트 핸들러를 종료할 때는 주의하세요. 이벤트 처리 및 코드 실행에 서로 다른 영향을 미치기 때문입니다.
- 더 포괄적인 기능을 위해 도우미 클래스를 만들거나 더 깔끔하고 관리하기 쉬운 접근 방식을 위해 선언적 스타일 프로그래밍을 활용할 수 있습니다.
위 내용은 JavaScript에서 동시 키 누름을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!