43

我正在尝试捕获touchend事件的触摸坐标但未定义。活动效果很好，但同样的touchstart概念在touchend. mousedown我用and构建了这段代码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;
});

小提琴

4

6 回答 6

39

您需要将值存储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;
});
于 2013-07-30T21:24:15.630 回答
35

我一直在看规范，4个触摸事件继承自touchEvent对象，它有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 中使用它们。也许实现添加了这个快捷方式，或者我看错了。

于 2014-07-10T00:54:24.460 回答
12

You should use changedTouches instead touches in 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;
});
于 2016-11-25T15:31:32.470 回答
3

Though the question didn't ask for jQuery, try this code if you need a jQuery alternative. Works on all latest versions of 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);
});

You can optionally omit 'originalEvent', and use 'changedTouches' for JS only script and jQuery/browsers that doesn't support.

于 2017-07-30T11:51:30.283 回答
1 
touchStart(event) {
  this.startX = event.touches[0].pageX;
},
touchEnd(event) {
  this.endX = event.changedTouches[0].pageX;
},
于 2017-04-15T07:41:59.373 回答
0

我建议这工作得很好，可以恢复与传统计算机相同的事件属性......

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 事件。

于 2019-03-17T11:15:28.783 回答