如何找出touchmove javascript事件的实际event.target？ [英] How to find out the actual event.target of touchmove javascript event?

问题描述

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

I am trying to develop a simple drag/drop UI in my web application. An item can be dragged by a mouse or a finger and then can be dropped into one of several drop zones. When an item is dragged over a drop zone (but not yet released), that zone is highlighted, marking safe landing location. That works perfectly fine with mouse events, but I'm stuck with touchstart/touchmove/touchend family on the iPhone/iPad.

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

The problem is that when an item's ontouchmove event handler is called, its event.touches[0].target always points to the originating HTML element (the item) and not the element which is currently under the finger. Moreover, when an item is dragged by finger over some drop zone, that drop zone's own touchmove handlers isn't called at all. That essentially means I can't determine when a finger is above any of the drop zones, and therefore can't highlight them as needed. At the same time, when using a mouse, mousedown is correctly fired for all HTML elements under the cursor.

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

Some people confirm that it's supposed to work like that, for instance http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/: For those of you coming from the normal web design world, in a normal mousemove event, the node passed in the target attribute is usually what the mouse is currently over. But in all iPhone touch events, the target is a reference to the originating node.

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

Question: is there any way to determine the actual element under a finger (NOT the initially touched element which can be different in many circumstances)?

推荐答案

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

That's certainly not how event targets are supposed to work. Yet another DOM inconsistency that we're probably all now stuck with forever, due to a vendor coming up with extensions behind closed doors without any review.

使用 document.elementFromPoint 解决它。

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

这篇关于如何找出touchmove javascript事件的实际event.target？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！