Методы управления событиями

Interact.js предоставляет мощный набор инструментов для управления событиями, связанными с интерактивными элементами на странице, такими как перетаскивание, масштабирование и вращение. Центральным элементом является метод .on(), который позволяет подписываться на события и обрабатывать их в реальном времени.

Синтаксис метода .on():

interact(target)
  .draggable({
    listeners: {
      start (event) { ... },
      move (event) { ... },
      end (event) { ... }
    }
  })
  .on('dragmove', function (event) { ... });
  • target — CSS-селектор, DOM-элемент или NodeList.
  • 'dragmove' — название события. Interact.js поддерживает множество событий: dragstart, dragmove, dragend, resizemove, gesturemove и другие.
  • Функция-обработчик получает объект события, содержащий координаты, смещения, целевой элемент (event.target) и дополнительные данные.

Метод .off() для снятия обработчиков

Метод .off() используется для удаления ранее назначенных обработчиков. Его использование предотвращает утечки памяти и позволяет динамически управлять поведением интерактивных элементов.

interact(target).off('dragmove', dragMoveHandler);
  • Если не передавать функцию, будут удалены все обработчики для указанного события.
  • Метод работает аналогично .on(), поддерживая все стандартные события Interact.js.

Подписка на несколько событий одновременно

Interact.js позволяет подписываться сразу на несколько событий через запятую:

interact(target)
  .on('dragstart dragmove dragend', function (event) {
    console.log(event.type, event.target);
  });

Это особенно полезно для элементов, где требуется единая логика обработки разных этапов взаимодействия.

События перетаскивания (Drag Events)

Drag Events включают три ключевых момента: dragstart, dragmove, dragend.

  • dragstart вызывается при начале перетаскивания. Обычно используется для инициализации переменных или изменения стиля элемента.
  • dragmove срабатывает на каждом изменении позиции элемента. В объекте события доступны dx и dy — смещения по осям X и Y.
  • dragend вызывается после завершения перетаскивания. Часто используется для сохранения финальных координат элемента.

Пример обновления позиции элемента:

interact('.draggable')
  .draggable({
    listeners: {
      move (event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    }
  });

События изменения размера (Resize Events)

События изменения размера управляются через resizemove и resizeend. Ключевой особенностью является предоставление размеров элемента и смещений, что позволяет динамически подстраивать стиль или границы контейнеров.

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move (event) {
        let { x, y } = event.target.dataset;
        x = (parseFloat(x) || 0) + event.deltaRect.left;
        y = (parseFloat(y) || 0) + event.deltaRect.top;

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        });

        event.target.dataset.x = x;
        event.target.dataset.y = y;
      }
    }
  });

События жестов (Gesture Events)

Interact.js поддерживает мульти-пальцевые жесты: масштабирование (gesturemove) и вращение (rotate). Объект события содержит свойства scale, rotation и distance, что позволяет точно управлять поведением элементов.

interact('.gesture')
  .gesturable({
    listeners: {
      move (event) {
        const target = event.target;
        const currentScale = parseFloat(target.getAttribute('data-scale')) || 1;
        const scale = currentScale * event.scale;

        target.style.transform = `scale(${scale}) rotate(${event.rotation}deg)`;
        target.setAttribute('data-scale', scale);
      }
    }
  });

События взаимодействия с перехватом (Pointer Events)

Interact.js позволяет контролировать низкоуровневые события через методы on('pointerdown'), on('pointermove'), on('pointerup'). Эти события полезны при создании кастомных взаимодействий или для комбинации нескольких типов действий (например, перетаскивание с жестами).

interact(target)
  .on('pointerdown', event => { console.log('Pointer down', event); })
  .on('pointermove', event => { console.log('Pointer move', event); })
  .on('pointerup', event => { console.log('Pointer up', event); });

Делегирование событий

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

interact('#container')
  .on('dragmove', '.draggable', event => {
    console.log('Dragged child element', event.target);
  });
  • В этом случае обработчик срабатывает только для элементов, соответствующих селектору .draggable внутри контейнера #container.
  • Позволяет минимизировать количество подписок и улучшает производительность при работе с динамически добавляемыми элементами.

Приоритет и порядок обработки событий

  • Если на одном элементе назначены несколько обработчиков одного события, они выполняются в порядке регистрации.
  • События могут быть остановлены методом event.stopPropagation(), предотвращая всплытие к родительским элементам.
  • Метод event.preventDefault() используется для предотвращения стандартного поведения браузера (например, выделение текста при перетаскивании).

Дополнительные возможности управления событиями

  • interact(target).unset() — снимает все обработчики и отменяет интерактивность для элемента.
  • Поддержка асинхронных обработчиков через Promise для сложных вычислений или сетевых запросов внутри событий.
  • Возможность объединения нескольких взаимодействий (draggable, resizable, gesturable) на одном элементе без конфликтов.
Оглавление