在触摸结束事件期间，Find元素手指处于打开状态

Find element finger is on during a touchend event

本文关键字：手指 元素 于打开 状态 Find 结束 触摸 事件      更新时间：2023-11-17

当调用touchend事件时，我需要发现哪个html元素在手指下。我正在使用的代码；

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

使用（非触摸）设备上的鼠标，此代码将在mouseup事件发生时正确记录与鼠标下的元素相关的数据。

然而，在触摸设备（ipad-safari）上，event.target是在触摸启动事件期间手指下方的元素，并将该元素的数据记录在触摸开始事件下

我还检查了touchmove事件的行为，它也有相同的行为（event.target是touchstart元素）。似乎所有触摸事件的目标都是在手势开始时触摸的元素。

当调用touchend事件时，我需要访问手指下的元素。我的手势可能会穿越许多元素。

编辑

进一步的研究从说明书中挖掘出了这一点。

5.5触摸端事件

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

此事件的目标必须是触摸点第一次放置在表面上时启动的同一元素，即使触摸点已经移动到目标元素的交互区域之外。

被移除的一个或多个触摸点必须包含在TouchEvent的changedTouches属性中，而不能包含在touches和targetTouches属性内。

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

使用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
});
相关文章：