Указатели и касания

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Раньше интерфейс писали дважды: mousedown/mousemove/mouseup для десктопа и touchstart/touchmove/touchend для телефона. Логика одна, код разный, а на ноутбуке с сенсорным экраном оба набора приходили одновременно и мешали друг другу.

Pointer-события — общий язык. Указателем считается всё, чем можно ткнуть в экран: курсор мыши, палец, перо. У каждого события есть номер указателя pointerId, тип pointerType, сила нажатия pressure и признак основного указателя isPrimary — на мультитаче первым пальцем.

Pointer-событие	Аналог у мыши	Когда приходит
pointerdown	mousedown	палец коснулся, кнопка нажата, перо опустилось
pointermove	mousemove	указатель поехал по элементу
pointerup	mouseup	отпустили
pointercancel	нет аналога	система забрала жест: начался скролл, свайп назад, звонок
pointerenter / pointerleave	mouseenter / mouseleave	указатель вошёл в элемент или покинул его

js

const btn = document.getElementById("btn");

btn.addEventListener("pointerdown", (event) => {
  console.log(event.type);
  console.log(event.pointerType);
  console.log(event.isPrimary);
});

// обычно такое событие шлёт браузер, здесь мы делаем это вручную
btn.dispatchEvent(new PointerEvent("pointerdown", {
  bubbles: true,
  pointerType: "mouse",
  isPrimary: true
}));

страница примера

Сначала предположите, что выведет код

Любое перетаскивание устроено одинаково: pointerdown запоминает старт, pointermove считает смещение, pointerup закрывает жест. Между down и up держите флаг: без него pointermove будет срабатывать на простое движение мыши над элементом.

Если указатель уезжает за границы элемента, события перестают до него доходить. Лечится это захватом: element.setPointerCapture(event.pointerId) внутри pointerdown — дальше все события этого указателя приходят вашему элементу, где бы палец ни был. Отпускать захват вручную не нужно, браузер снимает его на pointerup.

js

const box = document.getElementById("box");
const steps = [];
let dragging = false;
let startX = 0;

box.addEventListener("pointerdown", (event) => {
  dragging = true;
  startX = event.clientX;
});

box.addEventListener("pointermove", (event) => {
  if (!dragging) return;
  steps.push(event.clientX - startX);
});

box.addEventListener("pointerup", () => {
  dragging = false;
});

function fire(type, x) {
  box.dispatchEvent(new PointerEvent(type, {
    bubbles: true,
    pointerId: 1,
    pointerType: "touch",
    clientX: x
  }));
}

fire("pointerdown", 100);
fire("pointermove", 130);
fire("pointermove", 180);
fire("pointerup", 180);
fire("pointermove", 400);

console.log(steps);

страница примера

Сначала предположите, что выведет код

На телефоне браузер в любой момент может решить, что ваш жест — это скролл или системный свайп. Тогда он забирает указатель себе и присылает pointercancel вместо pointerup. Обработчика на pointerup в этом случае не будет никогда, и элемент останется в состоянии «меня тащат».

js

const card = document.getElementById("card");
const state = [];

card.addEventListener("pointerdown", () => state.push("down"));
card.addEventListener("pointerup", () => state.push("up"));
card.addEventListener("pointercancel", () => state.push("cancel"));

const send = (type) => card.dispatchEvent(new PointerEvent(type, {
  bubbles: true,
  pointerId: 7,
  pointerType: "touch"
}));

send("pointerdown");
send("pointercancel"); // браузер решил, что это скролл

console.log(state.join(","));

страница примера

Сначала предположите, что выведет код

Правило простое: завершающий код вешается сразу на два события — pointerup и pointercancel. Одна общая функция, две подписки.

Свойство pointerType возвращает строку: "mouse", "pen", "touch", а для незнакомого устройства — пустую строку или значение производителя. Поэтому надёжнее проверять на равенство "mouse", чем перечислять все сенсорные варианты: неизвестное устройство почти наверняка ближе к пальцу, чем к курсору.

Разветвлять всю логику по типу не надо — жест один. Разными бывают детали: подсказка про наведение бессмысленна без курсора, зона попадания под палец нужна крупнее, а у пера есть наклон и настоящее давление в pressure.

js

const pad = document.getElementById("pad");
const seen = [];

pad.addEventListener("pointerdown", (event) => {
  seen.push(event.pointerType);
});

["mouse", "touch", "pen"].forEach((type) => {
  pad.dispatchEvent(new PointerEvent("pointerdown", {
    bubbles: true,
    pointerType: type
  }));
});

console.log(seen.join(","));
console.log(seen.length);

страница примера

Сначала предположите, что выведет код

js

const save = document.getElementById("save");
const hint = document.getElementById("hint");

save.addEventListener("pointerdown", (event) => {
  // подсказку про горячую клавишу показываем только тем, у кого есть клавиатура и курсор
  hint.textContent = event.pointerType === "mouse" ? "Ctrl+S тоже работает" : "";
});

const tap = (type) => save.dispatchEvent(new PointerEvent("pointerdown", {
  bubbles: true,
  pointerType: type
}));

tap("touch");
console.log(hint.textContent);

tap("mouse");
console.log(hint.textContent);

страница примера

Сначала предположите, что выведет код

Одно касание разворачивается для страницы в целую очередь. Сначала идут pointer-события, потом — совместимые мышиные, которые браузер придумывает для старого кода, и только в самом конце click. Он приходит последним всегда, и на телефоне между касанием и им может пройти заметная пауза.

Это не повод отказываться от click: он же срабатывает от клавиатуры и от программ чтения с экрана, поэтому для кнопок и ссылок остаётся правильным выбором. А вот мгновенную реакцию — подсветку, начало перетаскивания, звук — вешают на pointerdown. Главное не делать одно и то же действие в обоих обработчиках, иначе оно выполнится дважды.

js

const tapme = document.getElementById("tapme");
const order = [];

["pointerdown", "pointerup", "mousedown", "mouseup", "click"].forEach((type) => {
  tapme.addEventListener(type, () => order.push(type));
});

// так браузер разворачивает одиночное касание пальцем
const pointer = (type) => tapme.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerType: "touch" }));
const mouse = (type) => tapme.dispatchEvent(new MouseEvent(type, { bubbles: true }));

pointer("pointerdown");
pointer("pointerup");
mouse("mousedown");
mouse("mouseup");
tapme.click();

console.log(order.join(" -> "));
console.log(order[0]);

страница примера

Сначала предположите, что выведет код

На ранних мобильных браузерах двойной тап увеличивал масштаб. Чтобы отличить первый тап от начала двойного, браузер после отпускания ждал около 300 мс и лишь потом слал click. Интерфейс от этого ощущался вязким, и целые библиотеки существовали только ради обхода этой паузы.

Сейчас ждать не нужно: если страница объявляет <meta name="viewport" content="width=device-width"> или элементу задан touch-action: manipulation, масштабирования двойным тапом нет и задержку убирают. Порядок событий при этом не меняется — click по-прежнему последний.

Пока обработчик touchstart, touchmove или wheel не отработал, браузер не знает, не вызовете ли вы preventDefault, и не решается двигать страницу. Один медленный обработчик — и скролл дёргается на каждом кадре.

Третий аргумент addEventListener снимает эту неопределённость: { passive: true } — обещание не отменять действие по умолчанию, и браузер начинает прокрутку сразу. На window, document и body эти события считаются passive по умолчанию, на обычном элементе — нет. Если отмена действительно нужна, ставьте { passive: false } явно, а ещё лучше запретите жест стилем touch-action — браузеру не придётся ждать вообще.

js

const soft = document.getElementById("soft");
const hard = document.getElementById("hard");

soft.addEventListener("wheel", (event) => event.preventDefault(), { passive: true });
hard.addEventListener("wheel", (event) => event.preventDefault(), { passive: false });

const wheel = () => new WheelEvent("wheel", { bubbles: false, cancelable: true });

const first = wheel();
soft.dispatchEvent(first);

const second = wheel();
hard.dispatchEvent(second);

console.log(first.defaultPrevented);
console.log(second.defaultPrevented);

страница примера

Сначала предположите, что выведет код

passive: true — это обещание, а не пожелание. Вызванный внутри такого обработчика preventDefault браузер проигнорирует, а в консоль напишет ошибку «Unable to preventDefault inside passive event listener invocation». Нужен запрет — снимайте passive явно.

Pointer-события покрывают мышь, палец и перо одним набором обработчиков — писать логику дважды больше не нужно.
Жест — это pointerdown, серия pointermove и pointerup, но вместо pointerup может прийти pointercancel: завершение вешают на оба события.
pointerType говорит, чем нажали; проверяйте на равенство "mouse", а не перечисляйте сенсорные варианты.
На касании click приходит последним, после pointer- и совместимых mouse-событий; мгновенную реакцию вешают на pointerdown, а click оставляют ради клавиатуры и скринридеров.
{ passive: true } — обещание не вызывать preventDefault: скролл стартует сразу, а сам preventDefault в таком обработчике молча игнорируется.

1/3Пользователь начал тянуть карточку пальцем, но браузер решил, что это скролл, и забрал жест себе. Какое событие придёт вашему обработчику?

2/3Что вернёт event.pointerType, если по элементу постучали пальцем?

3/3Внутри обработчика, добавленного с { passive: true }, вызвали event.preventDefault(). Что произойдёт?

Перетаскивание, которое переживает pointercancel

Допишите обработчики так, чтобы moves собирал смещения относительно точки старта, а после pointercancel движение переставало учитываться. Подсказка: нужны флаг состояния и общая функция завершения на два события.

js

const box = document.getElementById("box");
const moves = [];

// ВАШ КОД: pointerdown, pointermove, pointerup, pointercancel

function fire(type, x) {
  box.dispatchEvent(new PointerEvent(type, {
    bubbles: true,
    pointerId: 1,
    pointerType: "touch",
    clientX: x
  }));
}

fire("pointerdown", 100);
fire("pointermove", 130);
fire("pointermove", 180);
fire("pointercancel", 180);
fire("pointermove", 400);

console.log(moves); // должно получиться [30, 80]

страница примера

Сначала предположите, что выведет код

Состояние жеста живёт в переменной dragging, а завершение — одна функция на pointerup и pointercancel. Последнее движение приходит уже со снятым флагом и в массив не попадает.

jsлистинг · не запускается

const box = document.getElementById("box");
const moves = [];
let dragging = false;
let startX = 0;

box.addEventListener("pointerdown", (event) => {
  dragging = true;
  startX = event.clientX;
});

box.addEventListener("pointermove", (event) => {
  if (!dragging) return;
  moves.push(event.clientX - startX);
});

const stop = () => {
  dragging = false;
};

box.addEventListener("pointerup", stop);
box.addEventListener("pointercancel", stop);

console.log(moves); // [30, 80]

const box = document.getElementById("box");
const moves = [];
let dragging = false;
let startX = 0;

box.addEventListener("pointerdown", (event) => {
  dragging = true;
  startX = event.clientX;
});

box.addEventListener("pointermove", (event) => {
  if (!dragging) return;
  moves.push(event.clientX - startX);
});

const stop = () => {
  dragging = false;
};

box.addEventListener("pointerup", stop);
box.addEventListener("pointercancel", stop);

console.log(moves); // [30, 80]

Сколько пальцев на экране

Каждый указатель приходит со своим pointerId. Посчитайте, сколько их было прижато к элементу одновременно в пике, и запишите это число в max. Не забудьте, что палец может исчезнуть и через pointercancel.

js

const pad = document.getElementById("pad");
let max = 0;

// ВАШ КОД: считайте одновременно активные указатели по pointerId

function fire(type, id) {
  pad.dispatchEvent(new PointerEvent(type, {
    bubbles: true,
    pointerId: id,
    pointerType: "touch"
  }));
}

fire("pointerdown", 1);
fire("pointerdown", 2);
fire("pointerup", 1);
fire("pointerdown", 3);
fire("pointerdown", 4);

console.log(max); // должно получиться 3

страница примера

Сначала предположите, что выведет код

Идентификаторы удобно держать в Set: добавляем на pointerdown, убираем на pointerup и pointercancel. После первого отпускания на паде остаются указатели 2, 3 и 4 — это и есть пик.

jsлистинг · не запускается

const pad = document.getElementById("pad");
const active = new Set();
let max = 0;

pad.addEventListener("pointerdown", (event) => {
  active.add(event.pointerId);
  max = Math.max(max, active.size);
});

const drop = (event) => {
  active.delete(event.pointerId);
};

pad.addEventListener("pointerup", drop);
pad.addEventListener("pointercancel", drop);

console.log(max); // 3

const pad = document.getElementById("pad");
const active = new Set();
let max = 0;

pad.addEventListener("pointerdown", (event) => {
  active.add(event.pointerId);
  max = Math.max(max, active.size);
});

const drop = (event) => {
  active.delete(event.pointerId);
};

pad.addEventListener("pointerup", drop);
pad.addEventListener("pointercancel", drop);

console.log(max); // 3

Указатели и касания

Видеоразбор темы за 5–7 минут

Один указатель на все устройстваМышь, палец и перо — одни события

Жизненный цикл жестаdown, move, up и внезапный cancel

pointerTypeЧем именно нажали на элемент

Почему тап опаздываетКлик на телефоне приходит последним

Обещание не мешать: passiveНе заставляйте скролл ждать код

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Перетаскивание, которое переживает pointercancel

Сколько пальцев на экране