Touch

Данный компонент представляет собой унифицированный интерфейс для обработки пользовательских взаимодействий на различных устройствах (десктопы с мышью, сенсорные устройства). Touch подходит для реализации компонентов, которые требуют кросс-платформенной обработки касаний. Примерами таких компонентов являются Slider, Gallery или PullToRefresh, которые работают на базе Touch.

Обработка взаимодействия

Компонент позволяет обрабатывать различные фазы взаимодействия через соответствующие обработчики:

Начало взаимодействия

• onStart — общий обработчик начала перемещения;
• onStartX — обработчик начала горизонтального перемещения;
• onStartY — обработчик начала вертикального перемещения.

Движение

• onMove — общий обработчик перемещения;
• onMoveX — обработчик горизонтального перемещения;
• onMoveY — обработчик вертикального перемещения.

Завершение взаимодействия

• onEnd - общий обработчик завершения перемещения;
• onEndX - обработчик завершения горизонтального перемещения;
• onEndY - обработчик завершения вертикального перемещения.

Параметры взаимодействия

Каждый обработчик, перечисленный выше, содержит в параметре объект со следующей информацией:

• startX и startY — начальные горизонтальные и вертикальные координаты указателя соответственно;
• startT — время начала взаимодействия;
• duration — длительность взаимодействия в миллисекундах;
• isPressed — флаг активного нажатия;
• isY и isX — флаги вертикального и горизонтального перемещения соответственно;
• isSlideY и isSlideX — флаги вертикального и горизонтального свайпа соответственно;
• isSlide — общий флаг свайпа;
• clientX и clientY — текущие координаты указателя;
• shiftX и shiftY — смещение относительно начальной точки по горизонтали и вертикали соответственно;
• shiftXAbs и shiftYAbs — абсолютное смещение по горизонтали и вертикали соответственно;
• originalEvent — оригинальное событие.

События наведения/снятия указателя

Данные обработчики вызываются только для указателя, который поддерживает события pointerenter/pointerleave, и мыши.

• onEnter — обработчик входа курсора в область
• onLeave — обработчик выхода курсора из области

Свойство usePointerHover позволяет использовать только pointer-события для наведения, что работает даже на отключенных элементах:

<Touch usePointerHover onEnter={handleEnter} onLeave={handleLeave}>
  <input disabled /> {/* `onEnter` и `onLeave` сработают при взаимодействии с полем  */}
</Touch>

Настройка поведения

Пороговое значение свайпа

Свойство slideThreshold определяет минимальное расстояние в пикселях, необходимое для активации свайпа. По умолчанию равно 5.

<Touch slideThreshold={10}>
  <div>Свайп активируется при перемещении на 10px</div>
</Touch>

Предотвращение кликов

Свойство noSlideClick позволяет блокировать клики после распознавания свайпа:

<Touch noSlideClick onMove={handleMove}>
  <a href="/link">Ссылка не будет активироваться в случае свайпа</a>
</Touch>

Управление всплытием событий

Свойство stopPropagation позволяет остановить всплытие событий:

<Touch stopPropagation onStart={handleStart} onMove={handleMove} onEnd={handleEnd}>
  <div>События не будут всплывать выше</div>
</Touch>

Фаза capture

Свойство useCapture позволяет использовать фазу capture для событий:

<Touch useCapture onStart={handleStart}>
  <div>События будут перехватываться в фазе `capture`</div>
</Touch>

Мультитач

При обнаружении мультитача (более одного касания) жест прерывается и вызывается обработчик onEnd.

Свойства и методы