Я пытаюсь разработать простой интерфейс перетаскивания/перетаскивания в моем веб-приложении. Элемент можно перетаскивать мышью или пальцем, а затем можно отбрасывать в одну из нескольких зон выпадения. Когда элемент перетаскивается по зоне выпадения (но еще не выпущен), эта зона подсвечивается, маркируя безопасное место посадки. Это прекрасно работает с событиями мыши, но я застрял в семействе touchstart/touchmove/touchhend на iPhone/iPad.
Проблема заключается в том, что когда вызывается обработчик события ontouchmove, его event.touches[0].target всегда указывает на исходный HTML-элемент (элемент), а не на элемент, который сейчас находится под пальцем. Более того, когда элемент перетаскивается пальцем по какой-либо зоне перетаскивания, этот дескриптор собственных обработчиков touchmove вообще не вызывается. Это по существу означает, что я не могу определить, когда палец находится выше любой из зон падения, и поэтому не может выделить их по мере необходимости. В то же время при использовании мыши mousedown корректно запускается для всех элементов HTML под курсором.
Некоторые люди подтверждают, что он должен работать так, например http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/: Для тех из вас, кто пришел из обычного мира веб-дизайна, в обычном событии mousemove, node, переданном в целевом атрибуте, обычно является тем, что мышь в данный момент закончила. Но во всех событиях касания iPhone цель - это ссылка на исходный node.
Вопрос: есть ли способ определить фактический элемент под пальцем (НЕ изначально затронутый элемент, который может быть другим во многих случаях)?
Это, конечно, не то, как должны работать объекты событий. Еще одна несогласованность DOM, которую мы, вероятно, все время застряли навсегда, из-за того, что продавец придумывает расширения за закрытыми дверями без каких-либо обзоров.
Используйте document.elementFromPoint, чтобы обойти его.
document.elementFromPoint(event.clientX, event.clientY);
Принятый ответ 2010 года больше не работает: touchmove не имеет атрибута clientX или clientY. (Я предполагаю, что это использовалось, так как ответ имеет несколько upvotes, но в настоящее время он отсутствует.)
Текущее решение:
var myLocation = event.originalEvent.changedTouches[0];
var realTarget = document.elementFromPoint(myLocation.clientX, myLocation.clientY);
Протестировано и работает над:
НЕ работает:
Не тестировалось:
Я столкнулся с той же проблемой на Android (WebView + Phonegap). Я хочу иметь возможность перетаскивать элементы вокруг и обнаруживать, когда их перетаскивают через некоторый другой элемент.
По какой-то причине сенсорные события, похоже, игнорируют значение атрибута pointer-events.
Мышь:
pointer-events="visiblePainted" установлено, то event.target будет указывать на перетаскиваемый элемент.pointer-events="none" установлено, то event.target будет указывать на элемент под перетаскиваемым элементом (моя область перетаскивания)Вот как должны работать вещи и почему у нас есть атрибут pointer-events.
Touch:
event.target всегда указывает на перетаскиваемый элемент, вне зависимости от значения pointer-events, которое не соответствует IMHO.Моим обходным путем является создание моего собственного объекта события перетаскивания (общий интерфейс для событий мыши и касания), который содержит координаты события и цель:
для сенсорного события, которое я использую:
DragAndDrop.prototype.getDragEventFromTouch = function (event) {
var touch = event.touches.item(0);
return {
screenX: touch.screenX,
screenY: touch.screenY,
clientX: touch.clientX,
clientY: touch.clientY,
pageX: touch.pageX,
pageY: touch.pageY,
target: document.elementFromPoint(touch.screenX, touch.screenY)
};
};
И затем используйте это для обработки (проверяя, перетаскивается ли объект перетаскивания в зону перетаскивания). По какой-то причине document.elementFromPoint(), похоже, поддерживает значение pointer-events даже на Android.