如何找出 touchmove javascript 事件的实际 event.target？

Question

=我正在尝试在我的 Web 应用程序中开发一个简单的拖放 UI。可以用鼠标或手指拖动项目，然后将其放入多个放置区之一。当一个项目被拖动到放置区（但尚未释放）时，该区域会突出显示，标记安全着陆位置。这对鼠标事件非常有效，但我在 iPhone/iPad 上一直使用 touchstart/touchmove/touchend 系列。

问题是当一个项目的 ontouchmove 事件处理程序被调用时，它的 event.touches[0].target 总是指向原始 HTML 元素（项目）而不是当前手指下的元素。此外，当用手指将项目拖过某个放置区时，根本不会调用该放置区自己的 touchmove 处理程序。这实质上意味着我无法确定手指何时位于任何拖放区上方，因此无法根据需要突出显示它们。同时，当使用鼠标时， mousedown 会为光标下的所有 HTML 元素正确触发。

有些人确认它应该像那样工作，例如 http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/ ： 对于那些来自在正常的网页设计世界中，在正常的 mousemove 事件中，在 target 属性中传递的节点通常是鼠标当前所在的位置。但在所有 iPhone 触摸事件中，目标是对原始节点的引用。

问题： 有什么方法可以确定手指下的实际元素（不是最初触摸的元素，在许多情况下可能会有所不同）？

原文由 Ilya Semenov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这当然不是事件目标应该如何工作的。由于供应商在没有任何审查的情况下秘密提出扩展，我们现在可能会永远陷入另一个 DOM 不一致问题。

使用 document.elementFromPoint 解决它。

 document.elementFromPoint(event.clientX, event.clientY);

原文由 Glenn Maynard 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

2010 年接受的答案不再有效： touchmove 没有 clientX 或 clientY 属性。 （我猜它曾经是因为答案有很多赞成票，但目前没有。）

目前的解决方案是：

 var myLocation = event.originalEvent.changedTouches[0];
var realTarget = document.elementFromPoint(myLocation.clientX, myLocation.clientY);

测试并适用于：

• iOS 上的 Safari
• iOS 上的 Chrome
• Android 上的 Chrome
• 支持触控的 Windows 桌面上的 Chrome
• 支持触控的 Windows 桌面上的 FF

不适用于：

• 支持触控的 Windows 桌面上的 IE

未测试：

• 视窗电话

原文由 JSP64 发布，翻译遵循 CC BY-SA 3.0 许可协议