如何捕捉touchend坐标？

Question

我试图捕捉touchend事件的触摸坐标,但未定义.该touchstart事件的作品不错,但相同的概念失败上touchend.我建立了这个代码mousedown,并mouseup与该工作良好.

我错过了什么？

div.addEvent("touchstart", function (event) {
    event.preventDefault(); // to avoid scrolling
    span.innerHTML = event.page.x;
});
div.addEvent("touchend", function (event) {
    span.innerHTML = event.page.x;
});

小提琴

Answer 1

您需要存储值touchmove并将其读入touchend.

var lastMove = null;

// Save the touchstart to always have a position
div.addEvent('touchstart', function(event) {
  lastMove = event;
});

// Override with touchmove, which is triggered only on move
div.addEvent('touchmove', function(event) {
  lastMove = event;
});

Answer 2

我一直在看规范,4个触摸事件继承自touchEvent对象,它有3个列表属性,包含事件发生时所有触摸(屏幕上的每个手指)的信息,每个列表保存基于此的触摸criteria ::

changedTouches保存已超出目标元素表面的触摸.

touches:保存所有当前触摸.

targetTouch:保存目标元素表面内的所有当前触摸.

事件touchend保存手指被抬起的位置changedTouches,并且没有任何内容保存在任何其他列表中,因此如果您需要访问它,您应该使用event.changedTouches[event.changedTouches.length-1],这将返回带有pageX和pageY属性的触摸对象的坐标.
整行将是:

span.innerHTML = event.changedTouches[event.changedTouches.length-1].pageX;

我还无法理解的是,如果touchEvent对象中没有坐标属性,为什么要在touchstart和touchmove事件中使用它们,而不是使用touchend.也许实现添加了这个快捷方式,或者我想念.

Answer 3

您应该使用changedTouches,而不是touches在touchend

div.addEvent("touchstart", function (event) {
    event.preventDefault(); // to avoid scrolling
    span.innerHTML = event.pageX;
});
div.addEvent("touchend", function (event) {
    span.innerHTML = event.changedTouches[0].pageX;
});