javascript 在 touchend 事件期间查找元素手指处于打开状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11523496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find element finger is on during a touchend event
提问by Ken
I need to discover which html element was under the finger when the touchend event is called. The code I am using;
当调用 touchend 事件时，我需要发现手指下的 html 元素。我正在使用的代码；
$('.wsSquare').on("mouseup touchend",function(event){
event.preventDefault();
event.stopPropagation();
console.log($(event.target).data());
});
Using the mouse on a (non-touch) device, this code correctly logs the data associated with the element under the mouse at the time of the mouseup event.
在（非触摸）设备上使用鼠标，此代码在 mouseup 事件发生时正确记录与鼠标下的元素关联的数据。
However on a touch device (ipad safari), event.target is the element that was under the finger during the touchstart event and logs the data of the element under the touchstart event
但是，在触摸设备（ipad safari）上， event.target 是在 touchstart 事件期间位于手指下方的元素，并在 touchstart 事件下记录元素的数据
I've also examined the behavior of the touchmove event, this also has the same behaviour (the event.target is touchstart element). It seems that the target for all the touch events is the element touched at the beginning of the gesture.
我还检查了 touchmove 事件的行为，这也有相同的行为（event.target 是 touchstart 元素）。似乎所有触摸事件的目标都是在手势开始时触摸的元素。
I need to access the element under the finger when the touchend event is called. My gesture potentially traverses many elements.
我需要在调用 touchend 事件时访问手指下的元素。我的手势可能会遍历许多元素。
Edit
编辑
Further research dug up this from the specification.
进一步的研究从规范中发现了这一点。
5.5 The touchend event
A user agent must dispatch this event type to indicate when the user removes a touch point from the touch surface, also including cases where the touch point physically leaves the touch surface, such as being dragged off of the screen.
The target of this event must be the same Element on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of the target element.
The touch point or points that were removed must be included in the changedTouches attribute of the TouchEvent, and must not be included in the touches and targetTouches attributes.
5.5 touchend事件
用户代理必须调度此事件类型以指示用户何时从触摸表面移除触摸点，还包括触摸点物理离开触摸表面的情况，例如被拖出屏幕。
此事件的目标必须是接触点第一次放置在表面上时开始的元素，即使接触点已移出目标元素的交互区域。
被移除的触摸点必须包含在TouchEvent 的changedTouches 属性中，而不能包含在touches 和targetTouches 属性中。
So the observed behavior is correct, how can I change this behavior?
所以观察到的行为是正确的，我该如何改变这种行为？
回答by Some Guy
Use document.elementFromPointand feed it the co-ordinates from the events, for example, like this:
使用document.elementFromPoint事件的坐标并将其提供给它，例如，像这样：
$('.wsSquare').on("mouseup touchend",function(event){
event.preventDefault();
event.stopPropagation();
var changedTouch = event.changedTouches[0];
var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
// Do something with elem
});
