I am trying to prevent scrolling when I use arrow keys in my HTML5 game. It is a maze game that you control with arrow keys or buttons on the screen, but whenever I press the 'up' or 'down' keys, it always scrolls.I am using:
document.addEventListener('keydown', function(e){
if(e.keyCode === 40) {
down();
} else if(e.keyCode === 38) {
up();
} else if(e.keyCode === 37) {
leftclick();
} else if(e.keyCode === 39) {
rightclick();
}
})
Is this possible with javascript? I want it to be able to scroll with my mouse, but not when I use arrow keys on my keyboard. My game is at http://thomaswd.com/maze. Please help. Thanks!
Use e.preventDefault() to prevent the normal key action from taking place.
document.addEventListener('keydown', function(e){
if(e.keyCode === 40) {
down();
e.preventDefault();
} else if(e.keyCode === 38) {
up();
e.preventDefault();
} else if(e.keyCode === 37) {
leftclick();
e.preventDefault();
} else if(e.keyCode === 39) {
rightclick();
e.preventDefault();
}
})
Try this:
document.addEventListener('keydown', function(e) {
if(e.keyCode > 36 && e.keyCode < 41) {
e.preventDefault();
}
if (e.keyCode === 40) {
down();
} else if (e.keyCode === 38) {
up();
} else if (e.keyCode === 37) {
leftclick();
} else if (e.keyCode === 39) {
rightclick();
}
return false;
}, false);
}
Try to add e.preventDefault(); at the end
Related
I'm making a game that includes gravity and I need to make it so when you hit a wall or something than you can't move. I was thinking something along the lines of just stopping the forward movement but then you can just turn around and go into it backwards. No such luck so far.
Here's my movement code:
document.onkeydown = function(e) {
// e.preventDefault()
if(e.keyCode == 87) {
player.movement.w = true
}
if(e.keyCode == 65) {
player.movement.a = true
}
if(e.keyCode == 83) {
player.movement.s = true
}
if(e.keyCode == 68) {
player.movement.d = true
}
if(e.keyCode == 69) {
player.movement.e = true
}
if(e.keyCode == 81) {
player.movement.q = true
}
}
document.onkeyup = function(e) {
if(e.keyCode == 87) {
player.movement.w = false
}
if(e.keyCode == 65) {
player.movement.a = false
}
if(e.keyCode == 83) {
player.movement.s = false
}
if(e.keyCode == 68) {
player.movement.d = false
}
if(e.keyCode == 69) {
player.movement.e = false
}
if(e.keyCode == 81) {
player.movement.q = false
}
}
function loop() {
requestAnimationFrame(loop)
if(player.look.locked == true) {
if(player.movement.w == true) {
playerObj.translateZ(player.movement.speed / 100)
}
if(player.movement.a == true) {
playerObj.translateX(player.movement.speed / 100)
}
if(player.movement.s == true) {
playerObj.translateZ(player.movement.speed / 100 * -1)
}
if(player.movement.d == true) {
playerObj.translateX(player.movement.speed / 100 * -1)
}
if(player.movement.e == true) {
playerObj.translateY(player.movement.speed / 100 * -1)
}
if(player.movement.q == true) {
playerObj.translateY(player.movement.speed / 50)
}
}
}
loop()
(I know event.keyCode is depreciated)
I'm building an application that constantly listening to key presses. I use the $(document).keypress method, passing it
function(e) {
if (e.keyCode == 13) { if (currentStep === 1) {...} }
if (e.keyCode == 13) { if (currentStep === 2) {...} }
...
}
With many ifs inside. For reason of convenience, I would strongly prefer to "split" the keypress code to different locations in my code. So instead of this:
$(document).keypress(function(e) {
if (e.keyCode == 13) { if (currentStep === 1) {...} }
if (e.keyCode == 13) { if (currentStep === 2) {...} }
...
}
I would write it like this:
$(document).keypress(function(e) {
if (e.keyCode == 13) { if (currentStep === 1) {...} }
}
$(document).keypress(function(e) {
if (e.keyCode == 13) { if (currentStep === 2) {...} }
}
Does it make any difference?
This question already has answers here:
Pressing spacebar scrolls page down?
(3 answers)
Closed 2 years ago.
I am working on a WebGL application and I use the spacebar for movement of the camera. The problem is, when I press the spacebar the website also scrolls down. Is there a way to disable this feature?
None of the answers so far works reliably. They work for about a second, then the site scrolls down for a tiny amount of time and then the cycle repeats.
This is my code for the keypresses:
window.addEventListener("keydown", (e) => {
if(e.repeat) { return; }
if(e.which == 27 || e.which == 9) {
document.exitPointerLock();
checkMouse = false;
}
if(checkMouse) {
if(e.which == 87) { forwardPressed = true; }
if(e.which == 83) { backwardPressed = true; }
if(e.which == 65) { leftPressed = true; }
if(e.which == 68) { rightPressed = true; }
if(e.which == 32) { upPressed = true; event.stopPropagation(); event.preventDefault(); }
if(e.which == 16) { downPressed = true; }
}
});
As you can see, for the space key there already is one solution implemented but both types of answers I have gotten so far don't work.
You can do it something like this
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '32') {
event.preventDefault();
}
});
Add this to your javascript:
let checkMouse = true
window.addEventListener("keydown", (e) => {
if(e.repeat) {
return;
}
if(e.which == 27 || e.which == 9) {
document.exitPointerLock();
checkMouse = false;
}
if(checkMouse) {
if(e.which == 87) { forwardPressed = true; }
if(e.which == 83) { backwardPressed = true; }
if(e.which == 65) { leftPressed = true; }
if(e.which == 68) { rightPressed = true; }
if(e.which == 32) { upPressed = true; event.stopPropagation(); event.preventDefault(); }
if(e.which == 16) { downPressed = true; }
}
if (e.which == 32) {
return !(e.keyCode == 32);
}
});
checkMouse wasn't initialised before. It's working fine here.
I'm trying to do a kind of "key navigation" on my website: if it's pressed left_arrow, I return to the previous page and if it's pressed right_arrow i go to next page. I've done this, the "console.log("keydown")" works, but the function returns don't.
d3.select("body")
.on("keydown", function(e) {
console.log("keydown");
//return "line_chart.html";
if(e == 37) { // left
console.log("left");
return "line_chart1.html";
}
else if(e == 39) { // right
console.log("right");
return "line_chart2.html";
}
});
Instead of
.on("keydown", function(e) { //e is coming UNDEFINED
console.log("keydown");
//return "line_chart.html";
if(e == 37) { // left i found e as undefined
I got the keycode using d3.event.keycode and it worked something like below:
d3.select("body")
.on("keydown", function(e) {
console.log("keydown");
//return "line_chart.html";
if(d3.event.keycode == 37) { // left
console.log("left");
return "line_chart1.html";//this return will not do anything
}
else if(d3.event.keycode == 39) { // right
console.log("right");
return "line_chart2.html";//this return will not do anything
}
});
EDIT
d3.select("body")
.on("keydown", function(e) {
console.log("keydown");
//return "line_chart.html";
if(d3.event.keyCode == 37) { // left
console.log("left");
SOME_FUNCTION("line_chart1.html");
}
else if(d3.event.keyCode == 39) { // right
console.log("right");
SOME_FUNCTION("line_chart2.html");
}
});
I would like the left and right arrow keys to trigger the back and next button clicks in my Javascript. I feel like I'm not quite implementing it correctly since my buttons work but the keystrokes do not.
function init() {
flashmovie = document.getElementById('flashmovie');
document.getElementById('back').onclick = function () {
if (c == 0) {
c = paths.length;
}
c--
displayFiles();
}
document.getElementById('next').onclick = function () {
if (c == paths.length - 1) {
c = -1;
}
c++;
displayFiles();
}
document.keypress(function (e) {
if (e.which == 37) {
$("#back").click();
}
});
document.keypress(function (e) {
if (e.which == 39) {
$("#next").click();
}
});
}
You probably want the keydown event.
function init() {
document.getElementById('back').onclick = function() {
console.log('back!');
}
document.getElementById('next').onclick = function() {
console.log('next!');
}
document.addEventListener('keydown', function(e) {
if (e.which == 37) {
$("#back").click();
}
});
document.addEventListener('keydown', function(e) {
if (e.which === 39) {
$("#next").click();
}
});
}
init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="back">Back</button>
<button id="next">Next</button>
I guessed which event listener style you'd want (native DOM versus jQuery) because you've got a mix, but this should get you pointed in the right direction.
From experience, if you have more than a very simple use case for handling keypresses, I'd recommend utilizing a library, like Keypress.
Without jquery, try this
document.onkeyup = function(e){
if (e.which == 37) {
$('#back').click();
} else if (e.which == 39) {
$('#next').click();
}
}
With jquery,
$(document).keypress(function(e){
if (e.which == 37) {
$('#back').click();
} else if (e.which == 39) {
$('#next').click();
}
});