Question

我正在尝试捕获touchend事件上的触摸坐标，但未定义。 touchstart事件效果很好，但同一概念在touchend上失败。我使用mousedown和mouseup构建了此代码， that 效果很好。

我错过了什么？

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;
});

FIDDLE

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

我一直在查看specification，从touchEvent对象继承的4个触摸事件，其中包含3个列表属性，其中包含有关当时所有触摸（屏幕上的每个手指）的信息事件中，每个列表都根据以下标准保存触摸：

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;
});

Answer 4

虽然这个问题没有要求jQuery，但是如果你需要一个jQuery替代品，请尝试这个代码。适用于所有最新版本的jQuery。

$(document).on('touchstart', '.className', function (e) {
    console.log(e.originalEvent.touches[0].pageX);
});
$(document).on('touchend', '.className', function (e) {
    console.log(e.originalEvent.changedTouches[0].pageX);
});

您可以选择省略原始事件＆＃39;，然后使用＆＃39; changedTouches＆＃39;仅限JS脚本和不支持的jQuery /浏览器。

Answer 5

touchStart(event) {
  this.startX = event.touches[0].pageX;
},
touchEnd(event) {
  this.endX = event.changedTouches[0].pageX;
},

Answer 6

我建议这可以很好地工作，并且可以恢复与常规计算机相同的事件属性...

if(!('ontouchstart' in document.documentElement)){

Object.onmouseup = function(e){
      your code....
}

}else{

Object.ontouchend = function(e){
e = e.changedTouches[e.changedTouches.length-1];
      Your code....
}

}

非常易于管理。

*要在PC上使用Google Chrome浏览器来管理代码，它会在控制台模式下捕获TOUCH事件。

如何捕捉touchend坐标？

6 个答案: