1. Wasd key codes: var KEY_CODE = {LEFT: 97, UP: 119, RIGHT: 100, DOWN: 115}; After idle page codes change to: 1099,1094,1092 ... may change back. (I look at the values ​​in the console)
  2. Each time you press the function to an event, event.keypress is called as many times as the 0_o key was pressed. Code:

function Move() { addEventListener("keypress", function() { console.log(event.keyCode); var KEY_CODE = { LEFT: 97, UP: 119, RIGHT:100 , DOWN: 115 }; step=2; switch (event.keyCode) { case KEY_CODE.RIGHT: Right(); break; case KEY_CODE.LEFT: Left(); break; case KEY_CODE.UP: Up(); break; case KEY_CODE.DOWN: Down(); break; default: } }); } function Left() { element = document.getElementById('portrait'); left = window.getComputedStyle(element).left; value=left.substring(0,left.length-2); console.log("left "+value+" step"+step); value=parseInt(value)-step; console.log("value=parseInt(value)-step;"+value); value+="px"; console.log("value+px "+value); document.getElementById('portrait').style.left=value; console.log(" document.getElementById('portrait')="+document.getElementById('portrait').style.left); } function Right() { element = document.getElementById('portrait'); left = window.getComputedStyle(element).left; value=left.substring(0,left.length-2); value=parseInt(value)+step; value+="px"; document.getElementById('portrait').style.left=value; } function Up() { element = document.getElementById('portrait'); up = window.getComputedStyle(element).top; value=up.substring(0,up.length-2); value=parseInt(value)-step; value+="px"; document.getElementById('portrait').style.top=value; } function Down() { element = document.getElementById('portrait'); down = window.getComputedStyle(element).top; value=down.substring(0,down.length-2); value=parseInt(value)+step; value+="px"; document.getElementById('portrait').style.top=value; } 
 img { max-width: 100%; max-height: 100%; } #portrait { position: absolute; left: 300px; top:200px; width: 48px; height: 48px; } 
 <html> <head> <link rel="stylesheet" type="text/css" href="elements.css"> </head> <body onkeypress="Move()"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="move.js"></script> <div id="portrait" class="portrait"> <img src="img/illuminatygas.png"> </div> </body> </html>

    1 answer 1

    About dancing meanings

    In JavaScript, the events for OnKeyPress and OnKeyDown/OnKeyUp slightly different from each other during processing. In particular, the OnKeyPress function in the KeyboardEvent object passes in the charCode and keyCode values ​​the same value to the character code (and not the key). That is, in both values, a charCode is charCode , so you and the values ​​dance when you change the keyboard layout, and not because of idle time.

    To track the actual charCode use OnKeyDown/OnKeyUp for the handler.

    About your multiple keypress

    In the code you put on the body handler for pressing the <body onkeypress="Move()"> key, which works every time and each time the Move function is called, in which another addEventListener("keypress", ...) handler is hung again. As a result, they accumulate in you and each time they are all called together.