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

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

Основные события

Interact.js разделяет события на несколько типов, в зависимости от функционала: drag, resize, gesture. Каждый из этих типов имеет набор событий, которые могут быть зарегистрированы с помощью метода interact(target).on(eventName, listener).

Drag события:
- dragstart — срабатывает при начале перетаскивания.
- dragmove — срабатывает при каждом движении элемента.
- dragend — срабатывает при завершении перетаскивания.
Resize события:
- resizestart — начало изменения размеров.
- resizemove — изменение размеров элемента в процессе.
- resizeend — завершение изменения размеров.
Gesture события (для мультитач):
- gesturestart — начало жеста.
- gesturemove — движение жеста.
- gestureend — завершение жеста.

Регистрация обработчиков

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

interact('.draggable')
  .draggable({
    listeners: {
      start (event) { logEvent(event); },
      move (event) { logEvent(event); },
      end (event) { logEvent(event); }
    }
  });

function logEvent(event) {
  console.log(`Событие: ${event.type}`);
  console.log(`Цель:`, event.target);
  console.log(`Позиция: x=${event.pageX}, y=${event.pageY}`);
  console.log(`Смещение: dx=${event.dx || 0}, dy=${event.dy || 0}`);
}

Ключевые моменты:

event.type — тип события.
event.target — DOM-элемент, с которым произошло взаимодействие.
event.pageX и event.pageY — координаты курсора.
event.dx и event.dy — смещение относительно предыдущего события (для drag и resize).

Логирование событий с фильтрацией

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

interact('.draggable').draggable({
  listeners: {
    move(event) {
      if (Math.abs(event.dx) > 5 || Math.abs(event.dy) > 5) {
        console.log(`Существенное перемещение: dx=${event.dx}, dy=${event.dy}`);
      }
    }
  }
});

Это позволяет уменьшить количество выводимой информации и сосредоточиться на значимых изменениях.

Логирование нескольких элементов

Если требуется отслеживать события для множества элементов одновременно, можно использовать делегирование событий:

interact('.interactive').on('dragmove', function (event) {
  console.log(`Элемент ${event.target.id} перемещён на dx=${event.dx}, dy=${event.dy}`);
});

При таком подходе один обработчик управляет событиями всех элементов с заданным селектором .interactive.

Использование промежуточного состояния

Interact.js предоставляет объект event, который содержит полезные данные для анализа:

event.rect — объект с текущими размерами элемента (width, height, top, left).
event.delta — изменение позиции или размера за последнее событие.
event.velocity — скорость перемещения элемента.

Пример логирования позиции и скорости:

interact('.resizable').resizable({
  listeners: {
    move(event) {
      console.log(`Размер: ${event.rect.width}x${event.rect.height}`);
      console.log(`Скорость перемещения: vx=${event.velocity.x.toFixed(2)}, vy=${event.velocity.y.toFixed(2)}`);
    }
  }
});

Ведение журналов для отладки

Для сложных интерфейсов часто полезно сохранять события в массив или отправлять их на сервер для анализа:

let eventLog = [];

interact('.draggable').draggable({
  listeners: {
    move(event) {
      eventLog.push({
        type: event.type,
        targetId: event.target.id,
        x: event.pageX,
        y: event.pageY,
        dx: event.dx,
        dy: event.dy,
        timestamp: Date.now()
      });
    }
  }
});

// Вывод логов через 5 секунд
setTimeout(() => console.table(eventLog), 5000);

Такой подход позволяет создавать полноценные журналы действий пользователя, которые можно использовать для тестирования интерфейса и анализа пользовательского поведения.

Визуальное логирование

Для наглядного отображения событий можно комбинировать логирование с визуальными индикаторами:

function showIndicator(x, y) {
  const dot = document.createElement('div');
  dot.style.position = 'absolute';
  dot.style.width = '6px';
  dot.style.height = '6px';
  dot.style.background = 'red';
  dot.style.borderRadius = '50%';
  dot.style.left = `${x}px`;
  dot.style.top = `${y}px`;
  document.body.appendChild(dot);
  setTimeout(() => dot.remove(), 1000);
}

interact('.draggable').draggable({
  listeners: {
    move(event) {
      showIndicator(event.pageX, event.pageY);
    }
  }
});

Такое визуальное сопровождение помогает видеть траекторию движения элементов в реальном времени.