多谢帮忙解决下JavaScript的键盘事件
日期：2014-05-16 浏览次数：20509 次
谢谢各位高手帮忙解决下JavaScript的键盘事件
最近小弟在做一个网络应用地图 大家都应该玩过地图吧如果没有玩过的建议去www.mapabc.com去试下，用键盘的上下左右箭头来操作地图的上下左右移动。现在问题是在IE中我的程序是没问题的，但一到FireFox浏览器中 就不起作用了 好象被FireFox浏览器屏蔽掉了。现在问下哪位朋友做过类似的东西，比方在FireFox浏览器下有个图片可以使得用上下左右箭头进行方向的移动，麻烦教下小弟！如果在今天（07-5-18）解决者 还会追加分数！谢谢朋友们都来帮忙看看！
------解决方案--------------------
<script language= "JavaScript ">
<!--
/**
Description:方向键控制图片移动(兼容IE/Firefox),未加入数字键盘的方向键。
Author:chouchy(城市刀客)
Date:2007-05-20
*/
var key=0;
var tId=null;
window.onload=function()
{
var obj = document.getElementById( "myMap ");
var x = parseInt(obj.style.left);
vary = parseInt(obj.style.top);
document.onkeydown=keyDown;
document.onkeyup=keyUp;
}
function keyDown(e)
{
if(!e)
var e=window.event;
key = (e.which)? e.which : e.keyCode
if (key == 37) m(1); //Left，如需加入数字键盘上的方向键,请自行修改条件: if (key ==XX || key== 37) ,下同。
if (key == 38) m(2); //Up
if (key == 39) m(3); //Right
if (key == 40) m(4); //Down
}
function keyUp()
{
key=0;
clearTimeout(tId);
}
function m(idx)
{
clearTimeout(tId)
switch(idx)
{
case 1: obj.style.left = x-=5;tId = setTimeout( "m(1) ", 50); break;
case 2: obj.style.top = y-=5;tId = setTimeout( "m(2) ", 50); break;
case 3: obj.style.left = x+=5;tId = setTimeout( "m(3) ", 50); break;
default: obj.style.top = y+=5;tId = setTimeout( "m(4) ", 50);
}
}
//-->
</script>
<body>
<div id= "myMap " style= "position:absolute; left:0px; top:100px; ">
<img src= "http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif ">
</div>
最近小弟在做一个网络应用地图 大家都应该玩过地图吧如果没有玩过的建议去www.mapabc.com去试下，用键盘的上下左右箭头来操作地图的上下左右移动。现在问题是在IE中我的程序是没问题的，但一到FireFox浏览器中 就不起作用了 好象被FireFox浏览器屏蔽掉了。现在问下哪位朋友做过类似的东西，比方在FireFox浏览器下有个图片可以使得用上下左右箭头进行方向的移动，麻烦教下小弟！如果在今天（07-5-18）解决者 还会追加分数！谢谢朋友们都来帮忙看看！
------解决方案--------------------
<script language= "JavaScript ">
<!--
/**
Description:方向键控制图片移动(兼容IE/Firefox),未加入数字键盘的方向键。
Author:chouchy(城市刀客)
Date:2007-05-20
*/
var key=0;
var tId=null;
window.onload=function()
{
var obj = document.getElementById( "myMap ");
var x = parseInt(obj.style.left);
vary = parseInt(obj.style.top);
document.onkeydown=keyDown;
document.onkeyup=keyUp;
}
function keyDown(e)
{
if(!e)
var e=window.event;
key = (e.which)? e.which : e.keyCode
if (key == 37) m(1); //Left，如需加入数字键盘上的方向键,请自行修改条件: if (key ==XX || key== 37) ,下同。
if (key == 38) m(2); //Up
if (key == 39) m(3); //Right
if (key == 40) m(4); //Down
}
function keyUp()
{
key=0;
clearTimeout(tId);
}
function m(idx)
{
clearTimeout(tId)
switch(idx)
{
case 1: obj.style.left = x-=5;tId = setTimeout( "m(1) ", 50); break;
case 2: obj.style.top = y-=5;tId = setTimeout( "m(2) ", 50); break;
case 3: obj.style.left = x+=5;tId = setTimeout( "m(3) ", 50); break;
default: obj.style.top = y+=5;tId = setTimeout( "m(4) ", 50);
}
}
//-->
</script>
<body>
<div id= "myMap " style= "position:absolute; left:0px; top:100px; ">
<img src= "http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif ">
</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
