在 touchend 事件期间查找元素手指处于打开状态

Posted 2023-03-06

【中文标题】在 touchend 事件期间查找元素手指处于打开状态

【英文标题】：Find element finger is on during a touchend event

【发布时间】：2012-07-16 10:23:57

【问题描述】：

当调用 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 属性中。

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

【参考方案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
);

【讨论】：

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

@Bergi 就我使用过的 TouchEvents 而言，这取决于使用更多的设备和浏览器。但是该链接应该可以帮助 OP 找到适合他的方法。另外，this

这引发了涉及鼠标事件的错误。更好的方法可能是像这样使用它：var quit = e.changedTouches;，然后在应用下一行之前检查它是否不是假的。 if (quit) var elem = document.elementFromPoint(quit[0].clientX, quit[0].clientY);。为了便于阅读，我使用了不同的变量。

我会投赞成票，因为否则它非常有用。但它不起作用：demo.