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

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


Опубликовано: 28.09.2018 Просмотров: 1244 Комментарии: 1


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

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


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

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


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


Фото комментатора

Иван 09.08.2019

Вот именно такой функционал как на скрине мне нужен на open cart Version 2.0.1.0 Могли бы вы написать статью про это, как это реализовать???
Администратор

Ответ for-opencart.com 09.08.2019

Это калькулятор товара отрез/упаковки. Если все еще актуально напишите на почту info@microdata.pro я такое делаю

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

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