regresar - detectar boton atras del navegador javascript
Deshabilitar la tecla de flecha desplazándose en el navegador de los usuarios (2)
Estoy haciendo un juego usando canvas y javascript.
Cuando la página es más larga que la pantalla (comentarios, etc.) al presionar la flecha hacia abajo se desplaza la página hacia abajo y hace que el juego sea imposible de jugar.
¿Qué puedo hacer para evitar que la ventana se desplace cuando el jugador solo quiere bajar?
Supongo que con los juegos de Java, y eso, esto no es un problema, siempre y cuando el usuario haga clic en el juego.
Probé la solución desde: Cómo desactivar el desplazamiento de página en FF con las teclas de flecha , pero no pude hacerlo funcionar.
Resumen
Simplemente evite la acción predeterminada del navegador:
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
Respuesta original
Usé la siguiente función en mi propio juego:
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);
La magia ocurre en e.preventDefault(); . Esto bloqueará la acción predeterminada del evento, en este caso mover el punto de vista del navegador.
Si no necesita los estados de los botones actuales, simplemente puede soltar las keys y simplemente descartar la acción predeterminada en las teclas de flecha:
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);
Tenga en cuenta que este enfoque también le permite eliminar el controlador de eventos más adelante si necesita volver a habilitar el desplazamiento de la tecla de flecha:
window.removeEventListener("keydown", arrow_keys_handler, false);
Referencias
Para la mantenibilidad, adjuntaría el controlador de "bloqueo" al elemento en sí (en su caso, el lienzo).
theCanvas.onkeydown = function (e) {
if (e.key === ''ArrowUp'' || e.key === ''ArrowDown'') {
e.view.event.preventDefault();
}
}
¿Por qué no simplemente hacer window.event.preventDefault() ? MDN dice:
window.eventes una propiedad propietaria de Microsoft Internet Explorer que solo está disponible mientras se está llamando a un controlador de eventos DOM. Su valor es el objeto Evento que se está manejando actualmente.
Lecturas adicionales: