jquery - jquery：按钮mousedown状态改变

Question

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

我有一个按钮，当我点击它时，我希望它改变状态，但只要按钮被按下，就像任何操作系统本机按钮一样。

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

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

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

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

看起来很简单......但这不起作用。当您单击它时，状态确实会改变......但它会保持这种状态...... mouseup 事件仅在您第二次单击它时才起作用。

当我从焦点/模糊事件中执行代码时，toggleClass 也会发生这种情况。

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

score 4 · Accepted Answer

您应该考虑改用 CSS，因为它比通过 Javascript 添加/删除类要快得多：

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

score 1 · Accepted Answer

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

如果它不起作用，也许在 mouseup 功能上设置大约 200 毫秒的超时将改善功能。不是你想做的每一件事都是一堂课。

2 回答 2