javascript 如何捕获touchend坐标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17957593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to capture touchend coordinates?
提问by Rikard
I am trying to capture touch coordinate on the touchendevent but get undefined. The touchstartevent works good, but same concept fails on touchend. I built this code with mousedownand mouseupand thatworks good.
我正在尝试捕获touchend事件的触摸坐标但未定义。该touchstart事件运行良好，但相同的概念在touchend. 我建立了这个代码mousedown，并mouseup与该作品好。
What am I missing?
我错过了什么？
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;
});
采纳答案by adrenalin
You need to store the values on touchmoveand read it in touchend.
您需要将值存储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;
});
回答by David Villamizar
I've been looking at the specification, the 4 touch events inherit from the touchEventobject, which has 3 list atributes containing information about all the touches (every finger on the screen) at the time of the event, each list saves touches based on this criteria:changedTouches: Saves touches that have are out of the targeted element surface.touches: Saves all current touches.targetTouch: Saves all current touches that are within the surface of the target element.
The event touchend saves the position where the finger was lifted at changedTouches, and the nothing is saved in any of the other lists, therefore if you need to access this, you should use event.changedTouches[event.changedTouches.length-1], this returns a touch object with pageX and pageY atributes for coordinates.
The whole line would be:
我一直在看规范，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;我还无法理解的是，如果
touchEventtouchEvent对象中没有坐标属性，为什么要在 touchstart 和 touchmove 事件中使用它们，而不是在 touchend 中使用它们。也许实现添加了这个快捷方式，或者我错过了。回答by idsbllp
You should use changedTouchesinstead touchesin touchend
您应该使用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;
});
回答by Ajay Singh
Though the question didn't ask for jQuery, try this code if you need a jQuery alternative. Works on all latest versions of jQuery.
虽然问题没有要求 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);
});
You can optionally omit 'originalEvent', and use 'changedTouches' for JS only script and jQuery/browsers that doesn't support.
您可以选择省略“originalEvent”，并为不支持的仅 JS 脚本和 jQuery/浏览器使用“changedTouches”。
回答by Cherif
I advise this works very well and can recover the same event attributes as a conventional computer ...
我建议这很好用，并且可以恢复与传统计算机相同的事件属性......
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....
}
}
very easy to manage.
非常容易管理。
*To manage your code use Google Chrome on a PC, in console mode it captures TOUCH events.
*要管理您的代码，请在 PC 上使用 Google Chrome，在控制台模式下，它会捕获 TOUCH 事件。
回答by u7866657
touchStart(event) {
this.startX = event.touches[0].pageX;
},
touchEnd(event) {
this.endX = event.changedTouches[0].pageX;
},
