求助，一个响应键盘事件的例子

刚接触事件处理，想按住键盘→键就div移动10个像素，实现不了，请问这里错在哪了？应该怎么修改？<body>
<div id="oDiv" style="width:50px;height:50px;background-color:#993;margin:8px;float:left;">C
    </div>
</body>
<script>
function keyDownHandler(evt){
var event=window.event?window.event:evt;
if(event.keyCode==39)
event.target.pageX=event.target.pageX+10;
}
var oDiv=document.getElementById("oDiv");
oDiv.addEventListener("keydown",keyDownHandler);
</script>

解决方案 »

  1.   

    div上的按键事件没有捕获，换成window的好实现，应该有更好的方法function keyDownHandler(evt){

    var event=window.event?window.event:evt;
    if(event.keyCode==39)
    {
    var oDiv=document.getElementById("oDiv");
    oDiv.style.pixelLeft =oDiv.offsetLeft+10; 
    }
    //event.target.pageX=event.target.pageX+10;
    }
    window.addEventListener("keydown",keyDownHandler);//非ie
      

  2.   

    div的position属性的问题<html>
    <body>
    <div id="oDiv" style="position:absolute;width:50px;height:50px;background-color:#993;margin:8px;float:left;">C
        </div>
    </body>
    <script>
    function keyDownHandler(event){
         var event=window.event?window.event:evt;
    if(event.keyCode==39){
            var oDiv=document.getElementById("oDiv");
            oDiv.style.pixelLeft =oDiv.offsetLeft+10; 
    }
    }
    window.addEventListener("keydown",keyDownHandler);
    </script>
    </body>
    </html>
      

  3.   

    这回呢，ie和ff，chrome都可用。<html>
    <head>
    </head><body>
    <div id="oDiv" style="width:50px;height:50px;background-color:#993;margin:8px;float:left;position:absolute;">C
        </div>
    </body>
    <script>
    function keyDownHandler(evt){

    var event=window.event?window.event:evt;
    if(event.keyCode==39)
    {
    var oDiv=document.getElementById("oDiv");
    oDiv.style.left = ((oDiv.style.left)? Number(oDiv.style.left.replace("px","")):0)+10; 
    }
    }
    if(window.ActiveXObject)
    {
    document.body.attachEvent("onkeydown",keyDownHandler);
    }
    else
    {
    window.addEventListener("keydown",keyDownHandler);
    }</script></html>
      

  4.   

    谢谢！想在请教一个问题
    我把那份代码改成上下左右都响应
    此时若是相对定位，（左-10px 右+10px）无论按左按右都是向右跑，只是按左的时候，向右跑得比较少（上-10px  下+10px）无论按上按下都是像下跑，只是按上的时候，像下跑得比较少
    此时若是绝对定位，上下左右的能正常响应方向，但是如果都用正负10px的话，向左和向上都跑得很少，只能增加减去的px ，请问这是为什么？    function keyDownHandler(evt){
        var event=window.event?window.event:evt;
    var oDiv=document.getElementById("oDiv");
    switch(event.keyCode){
    case 37:
    oDiv.style.pixelLeft=oDiv.offsetLeft-10;
    break;
    case 38:
    oDiv.style.pixelTop=oDiv.offsetTop-10;
    break;
    case 39:
    oDiv.style.pixelLeft =oDiv.offsetLeft+10; 
    break;
    case 40:
    oDiv.style.pixelTop =oDiv.offsetTop+10; 
    break;
    default:
    break;
    }
    }
    window.addEventListener("keydown",keyDownHandler);
      

  5.   

    哦，那试一下这个<html>
    <body>
    <div id="oDiv" style="position:absolute;left:8;top:8;width:50px;height:50px;background-color:#993;margin:8px;float:left;">C
        </div>
    </body>
    <script>
    function keyDownHandler(event){        var oDiv=document.getElementById("oDiv");
        switch(event.keyCode){
            case 37:
                oDiv.style.pixelLeft=oDiv.style.pixelLeft-10;
                break;
            case 38:
                oDiv.style.pixelTop=oDiv.style.pixelTop-10;
                break;
            case 39:
                oDiv.style.pixelLeft =oDiv.style.pixelLeft+10; 
                break;
            case 40:
                oDiv.style.pixelTop =oDiv.style.pixelTop+10; 
                break;
            default:
                break;    
        }
    }
    window.addEventListener("keydown",keyDownHandler);
    </script>
    </body>
    </html>