JavaScript keydown事件不起作用

Question

这是我的问题：我有6张图片：

<img class="img" src="key_1.png" />
<img class="img" src="key_2.png" />
<img class="img" src="key_3_5.png" />
<img class="img" src="key_4.png" />
<img class="img" src="key_3_5.png" />
<img class="img" src="key_6.png" />

我想做的是，当我按下“向上”和“向下”箭头键时，图像旋转：

document.onkeydown = function () {
    switch (window.event.keyCode) {
    case 38:
        document.getElementsByClassName("img").style.webkitTransform = "rotate(7deg)"
        break;
    case 40:
        document.getElementsByClassName("img").style.webkitTransform = "rotate(-14deg)"
        break;
    }
};

但这是行不通的。

Answer 1

event应作为参数传递给事件处理程序。 发生事件时， event对象将作为参数传递给事件处理程序。 它不是全局对象，因此不能像window.event一样使用它。

 var eventHandler = function(event) { console.log(event.keyCode); // Your code here switch (event.keyCode) { case 38: document.getElementsByClassName("img").style.webkitTransform = "rotate(7deg)" break; case 40: document.getElementsByClassName("img").style.webkitTransform = "rotate(-14deg)" break; } }; document.addEventListener('keydown', eventHandler, false); 

 <img class="img" src="key_1.png" /> <img class="img" src="key_2.png" /> <img class="img" src="key_3_5.png" /> <img class="img" src="key_4.png" /> <img class="img" src="key_3_5.png" /> <img class="img" src="key_6.png" /> 

Answer 2

以下代码将在每次按键时将所有图像顺时针旋转1deg /逆时针旋转。

 var deg = 0, $img = $( 'img' ); function rotateImages ( deg ) { $img.css({ '-webkit-transform': 'rotate(' + deg + 'deg )', '-moz-transform': 'rotate(' + deg + 'deg )', 'transform': 'rotate(' + deg + 'deg )' }); } $( document ).on( 'keydown', function ( e ) { e.preventDefault(); // Prevents the page from scrolling up/down switch( e.keyCode || e.which ) { case 38: deg++; rotateImages( deg ); break; case 40: deg--; rotateImages( deg ); break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100"> <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100"> <img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520743411" width="100"> 

Answer 3

尝试这个：

function rotate(deg) {
  var elems = document.getElementsByClassName('img');
  for(var i in elems) {
    var elem = elems[i];
    elem.style.webkitTransform = 'rotate('+deg+'deg)';
  }
}

document.onkeydown = function(event) {
    switch(event.keyCode) {
        case 38:
            rotate(7);
            break;
        case 40:
            rotate(-14);
            break;
    }
};

运行示例： http : //plnkr.co/edit/RAg0wbwALTvT2tfzPumH?p=preview

请注意，当您使用getElementsByClassName返回一个列表而不是单个对象时，我不得不重写轮换，因此您必须对其进行迭代。

编辑：尽管检查此与addEventListener的“正确”的非侵入性的方式： http ://plnkr.co/edit/FpYfow6Wmou8zGs483hc? p=preview