jquery：按钮mousedown状态改变

Question

好的，这应该很容易，但我似乎无法让它发挥作用。

我有一个按钮，当我点击它时，我希望它能改变状态，但只有按下按钮才会有效，就像任何操作系统原生按钮一样。

所以这是我的代码......

$('button').live('mousedown', function(){

    $(this).addClass('down');

}).live('mouseup', function(){
    $(this).removeClass('down');
});

看起来很简单......但是这不起作用。单击它时，状态确实会发生变化......但它会保持这种状态...鼠标事件仅在您第二次单击时才起作用。

这也发生在toggleClass和我执行焦点/模糊事件的代码时。

这里发生了什么，我怎样才能让它正常工作？

Answer 1

您应该考虑使用CSS，因为它比显示目的要快得多，而不是通过Javascript添加/删除类：

button:active { /* this is the mousedown pseudoelement */ }
input:focus, textarea:focus { /* this represents text input fields with focus */ }

Answer 2

用jQuery编写的 cybermotron 发布的原始解决方案在Chrome，Firefox和IE上非常适合我。

如果它不起作用，也许在mouseup函数上设置约200ms的超时将改善功能。并非你想做的一切都是一个阶级。