javascript - 使用jQuery点击元素触发css :active

Question

我有一个按钮div:

<div id="hud-button1"> </div>

我给它附加了一个监听器:

$('#hud-button1').click(function(){ //Do Stuff });

它有一个 CSS :active 规则:

#hud-button1:active { /* .. */ }

到目前为止一切顺利。现在我想添加通过按键触发此按钮的选项:

window.onkeyup = function(e) {
    var key = e.keyCode ? e.keyCode : e.which;

    if (key == 87) { $('#hud-button1').click(); }
}

虽然这有效，但我希望按钮显示它通过 :active 规则播放的小“动画”。

我知道我可以添加一个类并快速删除它，但是按钮会被快速且大量地捣碎，所以我担心 Timeouts 会干扰和错误。有什么干净的解决方案吗？提前致谢。

Answer 1

谢谢你的帮助，我完全按照建议解决了它，一个类似于 :active 选择器的类被附加到 keydown 上并在 keyup 上被删除。

这样感觉非常灵敏，没有超时干扰。

$( document ).keydown(function(event){
    if(event.keyCode == 81){
        $("#hud-button1").click().addClass('active');
    }
    });

    $( document ).keyup(function(event){
    if(event.keyCode == 81){
        $("#hud-button1").removeClass('active');
    }
    });
}