есть ли сенсорный эквивалент мышиного центра?
Я хотел бы определить, не скользит ли пользователь по моему DIV.
Я предпочитаю решение, зависящее непосредственно от целевого элемента, а не от родительского элемента с пересчетом позиций и т.д.
Сайт: http://dizzyn.github.io/piano-game/ - отлично работает с мышью (мышь вниз и скользит; не работает с сенсорным слайдом)
Спасибо
Посмотрите на эти события:
touchstart Триггеры, когда пользователь вступает в контакт с поверхностью касания и создает точку касания внутри элемента, к которому привязано событие.
touchmove Триггеры, когда пользователь перемещает точку касания по поверхности касания.
touchhend Триггеры, когда пользователь удаляет точку касания с поверхности. Он срабатывает независимо от того, удалена ли сенсорная точка внутри связанного элемента или снаружи, например, если палец пользователя выскользнул из элемента сначала или даже с края экрана.
touchhenter Триггеры, когда точка касания входит в связанный элемент. Это событие не пузырится.
touchleave Триггеры, когда точка касания оставляет связанный элемент. Это событие не пузырится.
touchcancel Триггеры, когда сенсорная точка больше не регистрируется на сенсорной поверхности. Это может произойти, если пользователь переместил сенсорную точку за пределы пользовательского интерфейса браузера или, например, в плагин, или если появляется модальный сигнал предупреждения.
В частности, касание и касание.
Для тех, кто пытается обрабатывать сенсорные события в веб-приложении, здесь есть полезная документация W3C - сенсорные события, в которой подробно описываются события и способы их обработки.
WC3 заявляет:
Если веб-приложение может обрабатывать события касания, оно может их перехватывать, и пользовательский агент не должен отправлять соответствующие события мыши. Если веб-приложение специально не написано для устройств сенсорного ввода, оно может реагировать на последующие события мыши.
2019: Да-иш: Использование pointerenter.
По умолчанию касание заставляет браузер "захватывать" указатель так, чтобы последующие события попадали в область действия этого затронутого элемента. Это предотвращает события указателя/ввода, если вы явно не отпустите перехват. Кроме того, я почти уверен, что вы должны установить touch-action:none на соответствующих элементах, чтобы браузер не перехватывал прикосновения для стандартного панорамирования/масштабирования и т.д.
Пример:
CSS:
*{ touch-action: none; }
JS:
let div = document.querySelector("div")
div.addEventListener("pointerdown",(e)=>{
console.log("down")
console.log("attempt release implicit capture")
div.releasePointerCapture(e.pointerId) // <- Important!
})
div.addEventListener("pointerenter",(e)=>{
console.log("enter")
})
div.addEventListener("pointerleave",(e)=>{
console.log("leave")
})
Работает в Chrome как минимум. Хотя не так много в Mobile Safari 13 beta... В соответствии со спецификациями w3c, я вполне уверен, что так и должно быть. Возможно, когда iOS 13 будет официально выпущен, мы будем в курсе. [Я подал ошибку и похоже, что к ней обращаются.]