How do I disable space scrolling? I am making a canvas game (like agar.io) and I don't want the user to scroll down when he presses the space key, but I still want the canvas to recognize it as the user pressing space down. I am using p5.js as the canvas library.
Asked
Active
Viewed 1,678 times
5
-
Possible duplicate of [Pressing spacebar moves page down?](http://stackoverflow.com/questions/2343573/pressing-spacebar-moves-page-down) – Liran H Sep 27 '16 at 17:36
-
3@LiranH Please note that this is a [tag:p5.js] question, which contains its own key event functions. The answer you linked is on the right track, but it doesn't really help in this specific case. – Kevin Workman Sep 27 '16 at 17:40
-
Right you are, my apologies for flagging too quickly without more thought. – Liran H Sep 30 '16 at 13:56
-
@Liran Well, now I am banned thanks to you... – Big Ben GamerGuyKSPMC Sep 30 '16 at 20:47
1 Answers
8
This is covered in the reference:
Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method.
In other words, you can simply return false
from the keyPressed()
function:
function setup() {
createCanvas(500, 500);
}
function draw() {
}
function keyPressed(){
text("here", random(width), random(height));
return false;
}
This indicates that the page should not execute any default behavior. So you might only want to return false
in the case of certain keys.
You also might want to add similar return false
statements in the other mouse event functions to avoid the case where the user holds down the space key.

Kevin Workman
- 41,537
- 9
- 68
- 107
-
Since I am using instance mode, what is the keypressed function for instance mode? – Big Ben GamerGuyKSPMC Sep 27 '16 at 17:43
-
@BigBenGamerGuyKSPMC I'm not sure I understand your question. It's the `keyPressed()` function whether you're in instance mode or not. Also note my last sentence pointing out that you might need this in multiple functions. – Kevin Workman Sep 27 '16 at 17:47
-
Never mind, I figured it out. I am still a noob at p5 :(... its p.keyPressed – Big Ben GamerGuyKSPMC Sep 27 '16 at 17:48
-
@BigBenGamerGuyKSPMC No worries. I'm actually still pretty new to p5.js myself! – Kevin Workman Sep 27 '16 at 17:48
-
I have no familiarity with `p5.js`. Does `return false` act similarly to jQuery or do you need to use an explicit `preventDefault()` on the event? – zero298 Sep 27 '16 at 17:50
-
@zero298 I'm the opposite: I have very little experience with JQuery. I will say that the code I posted successfully prevents the space bar (or arrow keys) from scrolling down the page, so you don't have to do anything extra to the event. – Kevin Workman Sep 27 '16 at 17:51
-
@zero298 Looking at [the source](https://github.com/processing/p5.js/releases/download/0.5.3/p5.js) for p5.js, it turns out that p5.js internally checks whether you `return false` from the `keyPressed()` function and then calls `e.preventDefault()` for you. – Kevin Workman Sep 27 '16 at 17:54