admin Опубликовано 12 марта, 2022 Поделиться Опубликовано 12 марта, 2022 Как при зажатии кнопки +/- делать ускоренное увеличение/уменьшение количества товара Как понять что кнопки мыши зажата и выполнять какое-то действие при длительном нажатии. Часто делаю калькуляторы, где есть расчеты по количеству квадратных метров, количество упаковок, добавляю +/- в товаре и другие доработки. Недавно обратился постоянный заказик с просьбой сделать ускоренное действие по зажатии кнопки мышки на + или -. У него я ранее делал кнопки + и - при нажатии на которые увеличивается или уменьшается количество товара с шагом 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%, клиент доволен. А кому надо можете использовать этот код у себя в проектах 0 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.