jquery: изменение состояния mousedown кнопки

Question

ОК, это должно быть легко, но я не могу заставить его работать.

У меня есть кнопка, когда я нажимаю на нее, я хочу, чтобы она меняла состояние, но только до тех пор, пока кнопка нажата, как любая собственная кнопка ОС.

Так вот мой код ...

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

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

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

Выглядит достаточно просто, верно ... но это не работает. Когда вы щелкаете по нему, состояние меняется ... но оно остается таким же ... событие mouseup срабатывает только при втором нажатии на него.

Это также происходит с toggleClass и когда я выполняю код из события focus / blur.

Что здесь происходит и как я могу заставить его работать должным образом?

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.

В случае, если это не работает, возможно, установка времени ожидания около 200 мс для функции mouseup улучшит функциональность. Не все, что вы хотите сделать, это класс.