Touch события

В Solid.js, как и в других современных JavaScript-фреймворках, взаимодействие с пользователем через сенсорные события является важной частью построения интерактивных интерфейсов. Работа с сенсорными событиями может включать не только базовое определение касания, но и обработку жестов, плавных анимаций и других интеракций, которые могут быть полезны в мобильных и планшетных приложениях.

Структура Touch-событий

Сенсорные события в Solid.js тесно связаны с нативными событиями браузера. Они включают в себя стандартные события типа touchstart, touchmove, touchend и touchcancel, которые определяют момент начала, перемещения, завершения касания и его отмены соответственно.

Каждое из этих событий предоставляет объект, содержащий информацию о самом касании и координатах на экране. В отличие от мышиных событий, которые обрабатываются с использованием объекта MouseEvent, для сенсорных событий используется объект TouchEvent. Этот объект имеет свойство touches, представляющее собой список всех касаний, активных в момент события.

Пример обработки события touchstart:

import { createSignal } from 'solid-js';

function TouchComponent() {
  const [touchStart, setTouchStart] = createSignal(null);

  const handleTouchStart = (event) => {
    const touch = event.touches[0]; // Первое касание
    setTouchStart({ x: touch.clientX, y: touch.clientY });
  };

  return (
    <div
      onTouchSt art={handleTouchStart}
      style={{ width: '100%', height: '100vh', backgroundColor: 'lightblue' }}
    >
      {touchStart() ? `Touch started at: ${touchStart().x}, ${touchStart().y}` : 'Touch the screen'}
    </div>
  );
}

Важные события для работы с касанием

  1. touchstart — срабатывает, когда касание на экране начато. Это событие аналогично mousedown в мышиных событиях.
  2. touchmove — срабатывает, когда пальцем проводятся по экрану. Это событие используется для обработки перемещения в процессе касания.
  3. touchend — срабатывает, когда пальцем убираются с экрана. Это аналогично событию mouseup в мышиных событиях.
  4. touchcancel — происходит, если система отменяет текущее касание, например, когда происходят определенные действия (например, срабатывание уведомления).

Пример использования всех типов событий:

import { createSignal } from 'solid-js';

function TouchEventsComponent() {
  const [message, setMessage] = createSignal('Start touching the screen');

  const handleTouchStart = () => setMessage('Touch started');
  const handleTouchMove = () => setMessage('Touch moving');
  const handleTouchEnd = () => setMessage('Touch ended');
  const handleTouchCancel = () => setMessage('Touch cancelled');

  return (
    <div
      onTouchSt art={handleTouchStart}
      onTouchM ove={handleTouchMove}
      onTouch End={handleTouchEnd}
      onTouchCan cel={handleTouchCancel}
      style={{ width: '100%', height: '100vh', backgroundColor: 'lightgray' }}
    >
      {message()}
    </div>
  );
}

Работа с несколькими касаниями

Одной из особенностей сенсорных событий является возможность работать с несколькими одновременными касаниями. Например, можно обработать ситуации, когда два пальца касаются экрана одновременно, и это используется для жестов, таких как масштабирование (пинч).

Объект TouchEvent содержит массивы touches, targetTouches и changedTouches, каждый из которых имеет разные особенности.

  • touches — все активные касания на экране в данный момент.
  • targetTouches — касания, происходящие в пределах текущего элемента.
  • changedTouches — касания, которые были изменены (например, начались или завершились) в результате этого события.

Пример с двумя касаниями:

import { createSignal } from 'solid-js';

function MultiTouchComponent() {
  const [touchCount, setTouchCount] = createSignal(0);

  const handleTouchStart = (event) => {
    setTouchCount(event.touches.length);
  };

  const handleTouchEnd = (event) => {
    setTouchCount(event.touches.length);
  };

  return (
    <div
      onTouchSt art={handleTouchStart}
      onTouch End={handleTouchEnd}
      style={{ width: '100%', height: '100vh', backgroundColor: 'lightgreen' }}
    >
      {touchCount() > 1 ? `Multiple touches detected: ${touchCount()}` : 'Single touch detected'}
    </div>
  );
}

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

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

const handleTouchMove = (event) => {
  event.preventDefault(); // Останавливает прокрутку страницы
  // Добавьте здесь обработку движения
};

При этом стоит помнить, что блокировка прокрутки может быть нарушением пользовательского опыта, если она не обоснована.

Оптимизация производительности

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

Для оптимизации можно использовать такие подходы, как:

  • Дебаунсинг — сдерживание частоты обработки событий.
  • Throttling — ограничение частоты вызовов функций, чтобы избежать излишней нагрузки.
  • Reactivity — использование реактивных сигналов и вычислений для эффективного обновления интерфейса.

Пример использования throttling с использованием setTimeout:

import { createSignal } from 'solid-js';

function ThrottledTouchComponent() {
  const [touchPosition, setTouchPosition] = createSignal(null);
  let timeoutId;

  const handleTouchMove = (event) => {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      const touch = event.touches[0];
      setTouchPosition({ x: touch.clientX, y: touch.clientY });
    }, 100); // Обработка события каждые 100 мс
  };

  return (
    <div
      onTouchM ove={handleTouchMove}
      style={{ width: '100%', height: '100vh', backgroundColor: 'lightyellow' }}
    >
      {touchPosition() ? `Touch at: ${touchPosition().x}, ${touchPosition().y}` : 'Move your finger'}
    </div>
  );
}

Заключение

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

Оглавление