23

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

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

4

1 回答 1

32

使用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
});
于 2012-07-17T13:26:35.407 回答