• Главная
• Дорабатываем
• Как словить зажатие кнопки мышки

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

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

✎ Опубликовано: 28.09.2018 ☕ Просмотров: 4209 ✉ Комментарии: 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 я такое делаю