JQuery: Возможно ли оптимизировать добавление класса в момент нажатия на кнопку?

Question

[Максим Панов]

Здравствуйте!

Есть кнопка (.button), к которому цепляется класс (.button_pressed) в момент нажатия. На чистом CSS за это отвечает псевдокласс :active.

// Нажатие на кнопку
$(document).on("mousedown", ".button", function(e) {
	$(this).addClass("button_pressed");
});
$(document).on("mouseup", ".button", function(e) {
	$(this).removeClass("button_pressed");
});

Возможно ли (если то необходимо) оптимизировать код? Быть может есть решение лучше? Что смущает в данном варианте: топорный дубликат строк. Сам пока постигаю "азы", собирая собственную CSS-библиотеку компонентов на основе БЭМ.

Спасибо!

Answer 1

[Дмитрий Маринин]

Как вам такой вариант?

$(document).on('mousedown mouseup mouseout', '.button', function(e) {
    $(this).toggleClass('button_pressed', e.type == 'mousedown');
});

Comments

[Максим Панов]

Вот спасибо! А еще такой вопрос: с какой целью указывается type? Понимаю, что он "возвращает строку, содержащую информацию о типе операнда", но зачем?

[Дмитрий Маринин]

Максим Панов: toggleClass() вторым параметром принимает логический литерал, который задает, грубо говоря, приоритет. Если получит false, он сначала добавит класс, а потом уберет. С true — будет наоборот.

В вашем случае нужно добавлять класс только пока удерживается клавиша мыши, поэтому используется проверка типа события e.type == "mousedown", которая возвращает true при событии mousedown и false если это mouseup.

[Максим Панов]

Дмитрий Маринин: Понял. Огромное спасибо!)

Answer 2

[Слава]

Ваш метод не сработает если нажать на кнопку а отпустить кнопку мыши не на кнопке

Comments

[Максим Панов]

Точно. До этого не догадался. В таком случае лучше использовать mouseout?

[Слава]

Максим Панов: конкретно в данном случае лучше использовать css псевдокласс :active
Но если уж очень хочется поговнокодить, то я бы в момент mousedown подписывал документ на маусап с помощью .one
Т.е обработчик срабатывал бы только раз. Только при клике на нужный баттон

[Максим Панов]

Слава: Почему "говнокодить"? А если класс .button необходимо будет прописать не тегу button, а тегу span? У него, как известно, псевдокласса :active не бывает и проблему можно решить на JS. Вы с принципами БЭМ познакомьтесь прежде, чем делать какие-то выводы. А за ответ - благодарен. С уважением!)

[Слава]

Во-1, причем тут бэм вообще? :)
Во-2, кто вам сказал, что у спана "не бывает" псевдокласса :active? Бывает. И не только у спана.