Часто делаю калькуляторы, где есть расчеты по количеству квадратных метров, количество упаковок, добавляю +/- в товаре и другие доработки.
Недавно обратился постоянный заказик с просьбой сделать ускоренное действие по зажатии кнопки мышки на + или -. У него я ранее делал кнопки + и - при нажатии на которые увеличивается или уменьшается количество товара с шагом 0.1.
Небольшая предыстория
Заказчик сообщил что смотрит в яндекс вибвизоре и клиенты на его сайте что бы выбрать количество 6 кликают 60 раз по кнопке плюс))! (Шаг то 0.1). Он предложил сделать как в пульте от телевизора - когда зажимаешь кнопку идет быстрое изменение количества.
Итак, сказано, сделано. Для этого достаточно было написать небольшой код:
//быстрое зажатие
$('.tab_box .calc_input span').mousedown(function(){ //нажатие кнопки мышки
this_class = $(this).attr('class'); //берем класс кнопки (что бы понять + это или -)
click_interval = false;
click_timer = setTimeout(function(){ //запускаем таймаут что бы понять что кнопка зажата более чем на 300мс
click_interval = setInterval(function(){ //запускаем действие через интервал 30мс
$('.tab_box .calc_input span.' + this_class).trigger('click'); //само действие - клик по кнопке + или -
}, 30);
}, 300);
});
$('.tab_box .calc_input span').mouseup(function(){ //когда отпускаем кнопку мышки все ресетим
clearTimeout(click_timer); //убираем таймаут
clearInterval(click_interval); //убираем интервал
});
$('.tab_box .calc_input span').mouseleave(function(){ //когда покидаем мышкой кнопку (фикс когда зажатой кнопкой покинем + или -)
clearTimeout(click_timer);
clearInterval(click_interval);
});
//быстрое зажатие
Таким образом при зажатии кнопки более чем на 300мс идут имитации быстрых кликов с интервалом 30мс на которых уже есть события + и -. Задача выполнена на 100%, клиент доволен. А кому надо можете использовать этот код у себя в проектах
