在touchend事件期间查找元素手指

Question

我需要在调用touchend事件时发现手指下面的html元素.我正在使用的代码;

$('.wsSquare').on("mouseup touchend",function(event){
    event.preventDefault();
    event.stopPropagation();
    console.log($(event.target).data());    
});

在(非触摸)设备上使用鼠标,此代码在mouseup事件发生时正确记录与鼠标下的元素关联的数据.

但是在触摸设备(ipad safari)上,event.target是touchstart事件期间手指下的元素,并在touchstart事件下记录元素的数据

我还检查了touchmove事件的行为,这也有相同的行为(event.target是touchstart元素).似乎所有触摸事件的目标是在手势开始时触摸的元素.

调用touchend事件时,我需要访问手指下的元素.我的手势可能会遍历许多元素.

编辑

进一步的研究从规范中挖掘出来.

5.5 touchend事件

用户代理必须调度该事件类型以指示用户何时从触摸表面移除触摸点,还包括触摸点物理地离开触摸表面的情况,例如被拖离屏幕.

此事件的目标必须与触摸点首次放置在曲面上时开始的元素相同,即使触摸点已移动到目标元素的交互区域之外.

删除的一个或多个触点必须包含在TouchEvent的changedTouches属性中,并且不得包含在touches和targetTouches属性中.

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

Answer 1

使用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
});