在touchend事件中查找元素手指 [英] Find element finger is on during a touchend event

问题描述

当touchend事件被调用时，我需要发现哪个html元素在手指下。我使用的代码;

$ $ $''$ s $ c $ $''wsSquare'）。on（mouseup touchend，function（event）{
event.preventDefault（）;
event.stopPropagation（）;
console.log（$（event.target）.data（））;
}）;

在（非触摸）设备上使用鼠标时，此代码会正确记录与

然而，在触摸设备（ipad safari）中，event.target是在手指下的元素， touchstart事件并记录touchstart事件下元素的数据。

我也检查了touchmove事件的行为，这也具有相同的行为（事件。目标是touchstart元素）。看起来，所有触摸事件的目标都是在手势开始时触及的元素。

当touchend事件发生时，我需要访问手指下的元素调用。我的手势可能会遍历许多元素。

编辑

进一步的研究从规范。

5.5触发事件

用户代理必须调度此事件类型以指示用户何时从触摸表面，还包括触摸点在物理上离开触摸表面的情况，例如从屏幕上拖出。

此事件的目标必须即使接触点已经移动到目标元素的交互区域之外，它也是触摸点在第一次放置在表面上时所在的元素。

已删除的触点或点必须包含在TouchEvent的changedTouches属性中，且不得包含在触摸中并且t argetTouches属性。

所以观察到的行为是正确的，我该如何改变这种行为？

解决方案

使用 document.elementFromPoint ，然后为它提供事件的坐标，例如像这样：

 （mouseup touchend，function（event）{
 event.preventDefault（）; $（'。code> $（'。wsSquare'）。 
 event.stopPropagation（）; 
 var changedTouch = event.changedTouches [0]; 
 var elem = document.elementFromPoint（changedTouch.clientX，changedTouch.clientY）; 
 //用elem 
}）做一些事情; 
  

I need to discover which html element was under the finger when the touchend event is called. The code I am using;

$('.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.

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

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.

I need to access the element under the finger when the touchend event is called. My gesture potentially traverses many elements.

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.

So the observed behavior is correct, how can I change this behavior?

解决方案

Use document.elementFromPoint and feed it the co-ordinates from the events, for example, like this:

$('.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
});

这篇关于在touchend事件中查找元素手指的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！