사용자 브라우저에서 화살표 키 스크롤 비활성화

사용자 브라우저에서 화살표 키 스크롤 비활성화

---

캔버스와 자바 스크립트를 사용하여 게임을 만들고 있습니다.

페이지가 화면 (코멘트 등)보다 길 때 아래쪽 화살표를 누르면 페이지가 아래로 스크롤되어 게임을 플레이 할 수 없게됩니다.

플레이어가 아래로 이동하려고 할 때 창이 스크롤되지 않도록하려면 어떻게해야합니까?

Java 게임에서는 사용자가 게임을 클릭하는 한 문제가되지 않습니다.

나는 해결책을 시도했다 : 화살표 키를 사용하여 FF에서 페이지 스크롤을 비활성화하는 방법 , 그러나 작동하지 못했습니다.

---

요약

기본 브라우저 동작을 방지하기 만하면됩니다 .

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

원래 답변

내 게임에서 다음 기능을 사용했습니다.

var keys = {};
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = true;
        switch(e.keyCode){
            case 37: case 39: case 38:  case 40: // Arrow keys
            case 32: e.preventDefault(); break; // Space
            default: break; // do not block other keys
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
    },
false);

마법은 e.preventDefault();. 이렇게하면 이벤트의 기본 동작이 차단됩니다.이 경우 브라우저의 관점을 이동합니다.

현재 버튼 상태가 필요하지 않은 경우 keys화살표 키의 기본 동작을 삭제하고 버릴 수 있습니다 .

var arrow_keys_handler = function(e) {
    switch(e.keyCode){
        case 37: case 39: case 38:  case 40: // Arrow keys
        case 32: e.preventDefault(); break; // Space
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

이 방법을 사용하면 화살표 키 스크롤을 다시 활성화해야하는 경우 나중에 이벤트 처리기를 제거 할 수도 있습니다.

window.removeEventListener("keydown", arrow_keys_handler, false);

참고 문헌

• MDN : window.addEventListener
• MDN : window.removeEventListener

---

유지 관리를 위해 요소 자체 (귀하의 경우 캔버스)에 "차단"처리기를 첨부합니다.

theCanvas.onkeydown = function (e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.view.event.preventDefault();
    }
}

단순히하지 않는 이유는 window.event.preventDefault()무엇입니까? MDN 상태 :

window.eventDOM 이벤트 핸들러가 호출되는 동안에 만 사용할 수있는 독점 Microsoft Internet Explorer 속성입니다. 그 값은 현재 처리중인 Event 객체입니다.

추가 자료 :

• https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view
• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

참고URL : https://stackoverflow.com/questions/8916620/disable-arrow-key-scrolling-in-users-browser