Жесты и сенсорные события

Inferno — высокопроизводительный JavaScript-фреймворк для создания пользовательских интерфейсов, который поддерживает работу с событиями на уровне компонентов. Особое внимание уделяется обработке сенсорных событий и жестов, что особенно важно для мобильных приложений и интерфейсов с тачскрином.

Основы работы с сенсорными событиями

Сенсорные события включают в себя набор стандартных DOM-событий: touchstart, touchmove, touchend, touchcancel. В Inferno они обрабатываются через синтаксис, аналогичный обработке обычных событий мыши, с использованием camelCase:

import { render } from 'inferno';
import { Component } from 'inferno';

class TouchComponent extends Component {
  handleTouchStart = (e) => {
    console.log('Сенсорное нажатие', e.touches);
  }

  handleTouchMove = (e) => {
    console.log('Движение пальца', e.touches);
  }

  handleTouchEnd = (e) => {
    console.log('Пальцы убраны', e.changedTouches);
  }

  render() {
    return (
      <div
        onTouchSt art={this.handleTouchStart}
        onTouchM ove={this.handleTouchMove}
        onTouch End={this.handleTouchEnd}
        style={{ width: '300px', height: '300px', background: '#eee' }}
      >
        Сенсорная область
      </div>
    );
  }
}

render(<TouchComponent />, document.getElementById('app'));

Ключевой момент: события touchstart и touchend срабатывают при взаимодействии пальцев с элементом, а touchmove отслеживает движение пальца по поверхности. Объект события (TouchEvent) содержит массив touches с информацией о всех текущих точках касания и массив changedTouches, который отражает изменившиеся точки.

Обработка мультитач-жестов

Для мультитач-жестов необходимо анализировать массивы touches и changedTouches. Простейший пример определения увеличения/уменьшения масштаба (pinch):

handlePinch = (e) => {
  if (e.touches.length === 2) {
    const [touch1, touch2] = e.touches;
    const distance = Math.hypot(
      touch2.clientX - touch1.clientX,
      touch2.clientY - touch1.clientY
    );
    console.log('Расстояние между пальцами:', distance);
  }
}

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

События свайпа

Свайп — быстрое горизонтальное или вертикальное движение пальцем. Реализация требует фиксации начальной позиции и времени события touchstart и сравнения с конечной позицией на touchend:

handleSwipeStart = (e) => {
  this.startX = e.touches[0].clientX;
  this.startY = e.touches[0].clientY;
  this.startTime = Date.now();
}

handleSwipeEnd = (e) => {
  const endX = e.changedTouches[0].clientX;
  const endY = e.changedTouches[0].clientY;
  const endTime = Date.now();
  const dx = endX - this.startX;
  const dy = endY - this.startY;
  const dt = endTime - this.startTime;

  if (dt < 500 && Math.abs(dx) > 50 && Math.abs(dy) < 30) {
    console.log(dx > 0 ? 'Свайп вправо' : 'Свайп влево');
  }
}

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

Совмещение с другими событиями

Inferno позволяет комбинировать сенсорные события с кликами и мышиными событиями. Для этого важно учитывать различия между событиями: тач-события срабатывают раньше мышиных, что может вызвать двойное срабатывание. Для предотвращения этого используют preventDefault():

handleTouchStart = (e) => {
  e.preventDefault(); // предотвращает генерацию MouseEvent
}

Высокопроизводительные решения

Inferno оптимизирует обработку событий через делегирование на уровне корневого компонента, что снижает нагрузку при множественных сенсорных элементах. Применение функций мемоизации или классовых методов вместо стрелочных функций в render повышает производительность, особенно при работе с большими списками интерактивных элементов.