touchend 事件属性

Posted 2023-02-23

【中文标题】touchend 事件属性

【英文标题】：touchend event properties

【发布时间】：2011-11-03 18:54:39

【问题描述】：

如果我通过以下方式从移动设备捕获所有 touchend 事件：

$(document.body).bind('touchend', function (e) 
var touch = e.touches[0]; // doesnt work
...

我需要从 e 参数中获取 touch.screenX、touch.screenY、touch.clientX 和 touch.clientX。我看到的所有示例都表明 e.touches 将是一个集合，您可以通过e.touches[0] 获取触摸详细信息。在我对 ipad 的测试中，e.touches 始终未定义。我没有使用任何 jquery 插件。

也试过e.targetTouches，也是未定义的。

谁能帮忙？

【参考方案1】：

其实释放的touches会在changedTouches数组中找到，即：

e.changedTouches[0].pageX // get the end x page coordinate for a released touch

我认为这比通过 originalEvent 属性更可靠。

您可以在此处阅读有关 changedTouches 的更多信息： http://www.w3.org/TR/touch-events/#changedtouches-of-a-touchevent

【讨论】：

我同意，这是正确的解决方案。我自己正在使用它，因为它具有所需的正确数据以及为什么要混合比需要更多的 API。

如果您使用的是 jQuery，android 就不是这种情况。 $('#test').on('touchend', function (evt) console.log(evt.changedTouches); );是空的，如果你执行 $('#test').bind('touchend'...

@WORMSS：关于 jQuery event.originalEvent 属性的答案尚不清楚。这个问题在这里专门解决 - ***.com/questions/14999724/…

e.originalEvent.changedTouches[0].pageX 是正确答案！ [2017 年 11 月 20 日编辑]

这结束了我数周的挣扎。谢谢

【参考方案2】：

touches 属性是一个 TouchList 对象。可以看到TouchList类引用here。

如果您在#log div 上使用此示例代码监控其长度属性：

$('#element').bind('touchstart', function(event) 

    $('#log').append(event.originalEvent.touches.length+'<br/>');
);

$('#element').bind('touchmove', function(event) 

    $('#log').append(event.originalEvent.touches.length+'<br/>');
);

$('#element').bind('touchend', function(event) 

    $('#log').append(event.originalEvent.touches.length+'<br/>');
);

在执行 touchstart 和 touchmove 时会得到 1，执行 touchend 时会得到 0。这就是为什么你从e.touches[0] 获得 undefined 的原因。