How To Disable Scrolling with the Arrow Keys in Firefox

jzimmerlin · #1 10-12-2008, 03:24 AM

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.

felgall · #2 10-12-2008, 03:39 AM

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.

jzimmerlin · #3 10-12-2008, 01:22 PM

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?

felgall · #4 10-12-2008, 02:49 PM

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.

jzimmerlin · #5 10-12-2008, 03:11 PM

Ah gotcha. And I hear ya on the part about not interfering with standard browser functionality.

scragar · #6 10-12-2008, 03:21 PM

[quote=felgall;940290]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.[quote]

actualy I want you to test that theory:

HTML Code:

<!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>

boxbuilder · #7 11-12-2008, 09:05 AM

hi scragar! great solution! have u also some for IE????

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)