How To Disable Scrolling with the Arrow Keys in Firefox

@jzimmerlinOct 12.2008

Hi,
I am creating a Javascript web-app that will (hopefully) use the arrow keys to control some of the actions. The problem I’m running into is that when the up or down arrow keys are pressed, the page scrolls.

I tried using the code below to stop the scrolling…
function cancelEvent(e)
{
e = e ? e : window.event;
if(e.stopPropagation)
e.stopPropagation();
if(e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}

but it didn’t work. Any ideas? Suggestions? I appreciate your time and help.

to post a comment

JavaScript

@felgallOct 12.2008 — #Web pages can only use key combinations that the browser passes to them. The arrow keys have meaning to the browser and are therefore never passed to a web page.

@jzimmerlinauthorOct 12.2008 — #That's odd... because in Firefox 3, the arrow keys being pressed triggers an event, and that event has a keyCode for the arrow keys. So it would seem the arrow keys do get passed to the browser when they're pressed... but is there any way to stop them from scrolling the page?

@felgallOct 12.2008 — #The browser gets them before the page and so processes them first. Interfering with the normal functioning of someone's browser is not a good idea.

@jzimmerlinauthorOct 12.2008 — #Ah gotcha. And I hear ya on the part about not interfering with standard browser functionality.

@scragarOct 12.2008 — #Web pages can only use key combinations that the browser passes to them. The arrow keys have meaning to the browser and are therefore never passed to a web page.

actualy I want you to test that theory:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>demo</title>
 <script type="text/javascript">
 // <![CDATA[
 window.onload = function(){
 var temp = document.createElement('p');
 temp.appendChild(document.createTextNode('lorem...'));
 for(var i = 0; i < 100; i++){
 document.body.appendChild( temp.cloneNode(true)  );
 }
 
 addEvent(document.body, 'keydown', keyDown);
 addEvent(window, 'keydown', keyDown);
 
 }
 
 
 function addEvent(obj, evType, fn){
 if(obj.addEventListener){
 obj.addEventListener(evType, fn, false);
 return true;
 }else if(obj.attachEvent){
 var r = obj.attachEvent("on"+evType, fn);
 return r;
 }
 }
 
 
 function keyDown(e){
 var ev = e||event;
 var key = ev.which||ev.keyCode;
 var esc = 0;
 
 switch(key){
 case 37: // left
 case 38: // up
 case 39: // right
 case 40: // down
 esc = 1;
 break;
 }
 if(esc && ev.preventDefault){
 ev.preventDefault();
 }
 return esc;
 }
 
 // ]]>
 
 </script>
 
 </head>
 <body>
 :p
 </body>
 </html>[/code]

@boxbuilderNov 12.2008 — #hi scragar! great solution! have u also some for IE????

How To Disable Scrolling with the Arrow Keys in Firefox

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How To Disable Scrolling with the Arrow Keys in Firefox

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴