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事件时，我需要访问手指下的元素。我的手势可能会遍历许多元素。

修改

进一步的研究从the specification挖出了这个。

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

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

修改

1 个答案: