Touch: свойство clientX

Чтение только свойство Touch.clientX возвращает координату X точки касания относительно области просмотра, не включая смещение прокрутки.

Значение с плавающей точкой double, представляющее координату X точки касания относительно области просмотра, не включая смещение прокрутки.

Этот пример демонстрирует использование объекта Touch и свойств Touch.clientX и Touch.clientY. Свойство Touch.clientX — это горизонтальная координата точки касания относительно области просмотра браузера, исключая любое смещение прокрутки. Свойство Touch.clientY — это вертикальная координата точки касания относительно области просмотра браузера, исключая любое смещение прокрутки.

В этом примере предполагается, что пользователь начинает касание элемента с идентификатором source, перемещается внутри элемента или за его пределы, а затем отпускает поверхность. Когда вызывается обработчик события touchend, рассчитываются изменения координат Touch.clientX и Touch.clientY от начальной точки касания до конечной точки касания.

// Register touchstart and touchend listeners for element 'source'
const src = document.getElementById("source");
let clientX;
let clientY;

src.addEventListener(
  "touchstart",
  (e) => {
    // Cache the client X/Y coordinates
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
  },
  false,
);

src.addEventListener(
  "touchend",
  (e) => {
    let deltaX;
    let deltaY;

    // Compute the change in X and Y coordinates.
    // The first touch point in the changedTouches
    // list is the touch point that was just removed from the surface.
    deltaX = e.changedTouches[0].clientX - clientX;
    deltaY = e.changedTouches[0].clientY - clientY;

    // Process the data…
  },
  false,
);