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

發表cybermotron寫在jQuery的原始解決方案的工作非常適合我的Chrome，Firefox和IE。

如果不起作用，可能會在mouseup函數中設置大約200ms的超時時間來改進功能。並非所有你想做的事都是一堂課。