有沒有辦法使用jQuery的keydown移動圖像，而無需瀏覽器上下滾動？

Question

我想使用jQuery的keydown和animate來移動長網頁中間的圖片。但是，每次按下上下鍵時，瀏覽器也會上下滾動。有沒有辦法使瀏覽器靜態，因爲我只移動我的圖像？謝謝！

的index.html

<img class="pic" src="panda.jpg"/> 

的style.css

.pic { 
position: relative; 
left: 0; 
top: 0; 
margin-left: 355px; 
margin-top: -180px; 
} 

jQuery的

$(document).keydown(function(key) { 
    switch(parseInt(key.which,10)) 
    case 37: 
    $('.pic').animate({left: "-=10px"}, 'fast'); 
    break; 
    case 38: 
    $('.pic').animate({top: "-=10px"}, 'fast'); 
    break; 
    case 39: 
    $('.pic').animate({left: "+=10px"}, 'fast'); 
    break; 
    case 40: 
    $('.pic').animate({top: "+=10px"}, 'fast'); 
    break; 
     } 
    }); 

Answer 1

無論call preventDefault()上的事件（你在這裏路過的 「鑰匙」，其） ，或者在您的功能結束時返回false：

$(document).keydown(function(key) { 
    key.preventDefault(); 
    ... 
}); 

或者：

$(document).keydown(function(key) { 
    ... 
    return false; 
}); 

作爲獎勵，呼籲key.whichparseInt()這裏是不必要的，因爲這無論如何返回一個數值。

由於此答案隨機下調爲現在明顯的原因，here is a JSFiddle demo showing preventDefault() in action。