Как при зажатии кнопки +/- делать ускоренное увеличение/уменьшение количества товара

категория: , Дорабатываем

✎ Опубликовано: 28.09.2018 ☕ Просмотров: 294 ✉ Комментарии: 0

Как при зажатии кнопки +/- делать ускоренное увеличение/уменьшение количества товара

Как понять что кнопки мыши зажата и выполнять какое-то действие при длительном нажатии.

Часто делаю калькуляторы, где есть расчеты по количеству квадратных метров, количество упаковок, добавляю +/- в товаре и другие доработки.

Недавно обратился постоянный заказик с просьбой сделать ускоренное действие по зажатии кнопки мышки на + или -. У него я ранее делал кнопки + и - при нажатии на которые увеличивается или уменьшается количество товара с шагом 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%, клиент доволен. А кому надо можете использовать этот код у себя в проектах

Комментарии:

Быстрый поиск

Новое на сайте