在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属性中。

因此，观察到的行为是正确的，我该如何更改这种行为？

- Ken

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

- Some Guy

---

我认为 TouchEvent 本身没有坐标，但是 .changedTouches.item(0) 应该有 pageX/Y 坐标。 - Bergi

@Bergi 我使用TouchEvents的经验来看，它取决于使用的设备和浏览器。但是那个链接应该能帮助OP找到适合他的方法。此外，这个链接也很有用。 - Some Guy

这个问题是由鼠标事件引起的错误。更好的解决方法可能是像这样使用它：var quit = e.changedTouches;，然后在应用下一行之前检查它是否不为假值。if (quit) var elem = document.elementFromPoint(quit[0].clientX, quit[0].clientY);。我为了可读性使用了不同的变量。 - Shikkediel

我本来会点赞的，因为它非常有用。但是它就是不起作用：演示。 - Shikkediel