Hold - удержание

Hold в Interact.js относится к событию, которое срабатывает, когда пользователь удерживает элемент в течение определённого времени. Этот механизм позволяет реализовать такие функции, как длинное нажатие для вызова контекстного меню, начало перетаскивания или активация специальных действий без мгновенного срабатывания клика.

Основные свойства и параметры

Interact.js предоставляет возможность конфигурировать длительность удержания и связывать его с конкретными элементами. Ключевые параметры:

  • holdDuration — время удержания в миллисекундах. По умолчанию обычно 600 мс, но можно установить любое значение.
  • onhold — функция-обработчик события удержания.
  • onholdend — функция, вызываемая при завершении удержания, независимо от того, было ли оно зафиксировано как успешное.
  • onholdcancel — срабатывает, если удержание прервано (например, пользователь отпустил кнопку до истечения времени).

Пример базовой конфигурации:

interact('.draggable')
  .draggable({
    listeners: {
      hold: function (event) {
        console.log('Элемент удерживается');
      },
      holdend: function (event) {
        console.log('Удержание завершено');
      },
      holdcancel: function (event) {
        console.log('Удержание отменено');
      }
    },
    holdDuration: 800
  });

Отличие hold от обычного клика

В отличие от стандартного события click, hold не срабатывает мгновенно при нажатии. Это позволяет:

  • предотвращать случайное выполнение действий при быстром нажатии;
  • отделять короткие и длинные взаимодействия;
  • реализовывать разные сценарии интерфейса на основе времени удержания.

Ключевой момент: hold требует отслеживания не только нажатия, но и продолжительности, что делает его более гибким инструментом для сложных интерактивных компонентов.

Комбинация с drag и resize

Hold часто используется в связке с другими функциями Interact.js:

  • Drag — запуск перетаскивания только после удержания. Это предотвращает случайное перемещение при клике.
  • Resize — активация изменения размера элемента после длительного удержания на углу.

Пример комбинации drag и hold:

interact('.draggable')
  .draggable({
    holdDuration: 500,
    listeners: {
      hold: function (event) {
        event.target.classList.add('drag-ready');
      },
      move: function (event) {
        if (event.interaction.pointerIsDown) {
          event.target.style.transform = `translate(${event.dx}px, ${event.dy}px)`;
        }
      }
    }
  });

В этом примере элемент начинает двигаться только после того, как пользователь удерживает его полсекунды.

События hold и взаимодействие с касанием

Hold отлично подходит для сенсорных интерфейсов, где длинное нажатие заменяет правый клик мыши. Interact.js автоматически различает:

  • касание и удержание на мобильных устройствах;
  • удержание мыши на десктопах.

Для точной настройки можно использовать holdDuration отдельно для touch и mouse событий:

interact('.button')
  .on('hold', function (event) {
    console.log('Долгое нажатие активировано');
  })
  .holdDuration(700);

Отмена удержания

Отмена hold важна для предотвращения конфликтов с другими событиями. Interact.js позволяет использовать holdcancel, который срабатывает если:

  • пользователь поднял палец или отпустил кнопку раньше установленного времени;
  • элемент был перемещён во время удержания;
  • событие взаимодействия было прервано.

Пример:

interact('.draggable')
  .draggable({
    listeners: {
      holdcancel: function (event) {
        console.log('Удержание прервано, действие отменено');
      }
    },
    holdDuration: 600
  });

Практические советы

  1. Оптимальная длительность — обычно 500–800 мс. Меньше — срабатывает слишком быстро, больше — пользователь может потерять терпение.
  2. Визуальная индикация — добавление класса или анимации при hold помогает понять пользователю, что удержание зафиксировано.
  3. Сочетание с drag — удержание до активации перетаскивания предотвращает случайные перемещения при клике.
  4. Сенсорные устройства — hold идеально подходит для эмуляции правого клика на мобильных устройствах, где стандартного контекстного меню нет.

Интеграция с событиями Pointer и Interaction

Hold полностью интегрируется с системой событий Interact.js:

  • pointerdown и pointerup используются для отслеживания начала и конца удержания;
  • interaction.start и interaction.stop помогают контролировать пользовательское взаимодействие на более низком уровне;
  • позволяет объединять hold с drag, resize и drop для сложных интерактивных интерфейсов.

Вывод по использованию

Hold — мощный инструмент для создания длительных взаимодействий с элементами. Он повышает точность управления интерфейсом, снижает риск случайных действий и расширяет возможности сенсорного и десктопного взаимодействия. Использование hold вместе с drag и resize позволяет создавать динамичные, отзывчивые и удобные элементы управления.

Оглавление