Фазы событий

В библиотеке Interact.js обработка событий разделяется на несколько фаз, что позволяет гибко управлять взаимодействием пользователя с элементами на странице. Понимание этих фаз критически важно для правильной настройки drag-and-drop, resize и gesture-взаимодействий.

1. Фаза capture (захвата)

Фаза capture выполняется первой при любом событии. В этой фазе событие движется от корневого элемента документа к целевому элементу (top-down). Она используется для:

  • Предварительной проверки допустимости действия.
  • Прерывания событий до того, как они достигнут конкретного элемента.
  • Установки начальных условий, например, фиксации координат курсора перед началом drag-сессии.

Пример настройки обработчика capture:

interact('.draggable')
  .on('dragstart', function (event) {
    console.log('Capture phase: dragstart', event);
  }, true); // третий параметр true указывает на фазу capture

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

2. Фаза target (цель)

После capture событие достигает цели, то есть непосредственно элемента, на котором произошло взаимодействие. В этой фазе выполняются основные действия, которые чаще всего ассоциируются с событием:

  • Перемещение элемента (drag move)
  • Изменение размеров (resize)
  • Срабатывание пользовательских callback-функций

Пример:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (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;
  });

Важно: Фаза target является основной для работы с координатами и визуальной трансформацией элементов.

3. Фаза bubble (всплытие)

После обработки на цели событие движется обратно к корню документа — это фаза всплытия. Она полезна для:

  • Выполнения действий, зависящих от состояния дочерних элементов.
  • Объединения информации от нескольких вложенных элементов.
  • Отмены действий или применения глобальных ограничений.

Пример:

interact(document)
  .on('dragend', function (event) {
    console.log('Bubble phase: dragend', event);
  });

Особенность: обработчики во фазе всплытия могут реагировать на событие, уже изменённое на целевом элементе.

4. Фаза before-action (до действия)

Interact.js вводит специальную фазу before-action, которая срабатывает перед началом любой интерактивной операции (drag, resize, gesture). Используется для:

  • Проверки условий запуска (например, ограничение области перетаскивания).
  • Изменения конфигурации взаимодействия динамически.
  • Отмены действия до его старта через event.interactable.stop().

Пример проверки границ:

interact('.draggable')
  .draggable({
    listeners: {
      beforestart(event) {
        if (!event.target.classList.contains('allowed')) {
          event.interactable.stop();
        }
      }
    }
  });

5. Фаза action (действие)

Эта фаза — собственно выполнение drag, resize или gesture. В ней обновляются координаты, размеры и выполняются все эффекты:

  • dragmove — перемещение элемента по координатам.
  • resizemove — изменение размеров с учётом ограничений.
  • gesturemove — масштабирование и вращение с мультитачем.

Особенности:

  • События action могут происходить многократно за один drag-сессии.
  • Delta-параметры (event.dx, event.dy, event.deltaRect) позволяют точно отслеживать изменения за каждый кадр.

6. Фаза after-action (после действия)

Фаза after-action срабатывает по завершении интерактивного действия:

  • dragend — завершение перемещения.
  • resizeend — завершение изменения размеров.
  • gestureend — завершение жеста.

Пример сохранения состояния:

interact('.draggable')
  .draggable({
    listeners: {
      end(event) {
        console.log(`Элемент ${event.target.id} перемещён на:`, event.pageX, event.pageY);
      }
    }
  });

Значение этой фазы — окончательная фиксация данных и очистка временных переменных, использованных во время действия.

7. Взаимодействие фаз

Каждое событие в Interact.js проходит через сочетание фаз, что позволяет гибко контролировать процесс:

  1. before-action — проверка и возможность отмены.
  2. capture — перехват события на пути к цели.
  3. target — выполнение основных действий на элементе.
  4. action — обновление координат и визуальные изменения.
  5. bubble — всплытие для глобальной обработки.
  6. after-action — завершение, сохранение состояния.

Правильное использование этих фаз даёт полный контроль над интерактивными элементами и предотвращает нежелательные эффекты при сложных вложенных взаимодействиях.

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

Оглавление