jQuery（Swipe vs. Touch）pageX和pageY继续返回0
我在iPhone上玩touchstart和touchend事件。我构建了一个带有div的示例页面，如果您触摸它并滚动页面，它应该返回开始和结束位置的y坐标。jQuery（Swipe vs. Touch）pageX和pageY继续返回0
jQuery的：
var touchStartPos;
$('.theDiv')
.bind('touchstart', function(e){
touchStartPos = e.pageY;
})
.bind('touchend', function(e){
alert(touchStartPos + ' | ' + e.pageY)
})
当我打开我的iPhone上该网页，然而，警报不断报告这两个值为零。有人看到我有什么不对吗？
UPDATE：
我碰到这段代码在jQuery Mobile的项目绊倒：https://github.com/jquery/jquery-mobile/issues/734
注释它从它伸出：
// (in iOS event.pageX and event.pageY are always 0)
这并不是说为什么就是这样，但至少我发现有人看到同样的事情。将挖掘该页面上的示例代码，以查看解决方案是否存在。
UPDATE II：
好了，通过上面的链接示例代码看后，看起来这将返回的实际值：
e.originalEvent.touches[0].pageY
美中不足的是，我现在意识到，这不是我需要。它会返回我将该事件附加到与HTML文档相关的对象内的对象内的区域的Y偏移量，而不是浏览器窗口。
我的目标是找出屏幕上触摸开始的位置以及结束位置......然后比较这些值。如果它们有点不同，那么我们就会执行滑动操作......而不是触摸。
UPDATE III：
我也发现引用这些例子：
e.originalEvent.touches[0].pageX
event.targetTouches[0].pageY
虽然我似乎无法得到那些要么工作。两者都返回未定义的错误。
UPDATE IV：
它看起来像一个解决方案是在文档本身到轨道偏移（）。我可以将一个touchend事件应用到文档中，然后检查它是否偏移。
问题在于，我的touchend事件将首先触发我的页面上的元素，然后它会在文档上触发它（冒泡）。所以我不能真正确定它是否是触摸或滑动之前我需要找出对象touchend事件做什么。
还在琢磨这一个...
好快的答案是当手指离开屏幕（touchend），你无法检测到触摸。
我的第一个例子证明：http://jsfiddle.net/Y4fHD/
我们的解决方法。或称它为你想要的。可能在touchend事件中检测不到，因为触摸已经结束了。
绑定在touchmove事件的处理：http://jsfiddle.net/Y4fHD/1/
var endCoords = {};
$(document.body).bind("touchmove", function(event) {
endCoords = event.originalEvent.targetTouches[0];
});
然后使用变量endCoords到确定的最后一抹
$(document.body).bind("touchend", function(event) {
$('p').text("Your end coords is: x: " + endCoords.pageX + ", y: " + endCoords.pageY);
});
好的尝试只需轻点您的设备！那么错误仍然会发生：为什么？因为你没有移动你的触摸。
如果大家都准备在touchstart定义endCoords变量我们在那里：http://jsfiddle.net/Y4fHD/2/
var endCoords = {};
$(document.body).bind("touchstart touchmove", function(event) {
endCoords = event.originalEvent.targetTouches[0];
});
然后使用变量endCoords到确定的最后一抹
$(document.body).bind("touchend", function(event) {
$('p').text("Your end coords is: x: " + endCoords.pageX + ", y: " + endCoords.pageY);
});
现在尝试挖掘你的设备！
最后的一些注意事项是：让变量：startCoords和endCoords然后在touchend事件中使用这些：http://jsfiddle.net/Y4fHD/3/
var startCoords = {}, endCoords = {};
$(document.body).bind("touchstart", function(event) {
startCoords = endCoords = event.originalEvent.targetTouches[0];
});
$(document.body).bind("touchmove", function(event) {
endCoords = event.originalEvent.targetTouches[0];
});
$(document.body).bind("touchend", function(event) {
$('p').text("Your touch on the axis: " + Math.abs(startCoords.pageX-endCoords.pageX) + "x, " + Math.abs(startCoords.pageY-endCoords.pageY) + "y");
});
注：
上述例子 没有进行测试，希望它的作品！ Math.abs给了我一些如的绝对值：-5变为5
这里是什么对我工程....
$('.someClass').bind('touchmove',function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
var elm = $(this).offset();
var x = touch.pageX - elm.left;
var y = touch.pageY - elm.top;
if(x < $(this).width() && x > 0){
if(y < $(this).height() && y > 0){
//your code here
}
}
});
有被简化的代码，我用来检测刷卡对于.myelement手势，原是滑盖画廊
$(function() {
var diff, tchs, del = 150,
clk = function(el){
if (typeof(tchs) !== 'object') return; //we have nothing to do
if ((diff - tchs[tchs.length - 1].pageX) < 0) { //swipe right
}
else if ((diff - tchs[tchs.length - 1].pageX) > 0) { //swipe left
}
};
$('.myelement').bind('touchstart touchmove', function(ev){
var oev = ev.originalEvent, el = $(this);
switch(ev.type.charAt(5)){
case 's': //touch start
diff = oev.pageX;
window.setTimeout(clk, del, el);
break;
case 'm': //touch move
tchs = oev.touches;
break;
}
});
});
UPD：顺便说一下，当我用MobiOne版本2.0.0M2它已经把touchend pageX属性值检测中心软件，因为我是意料之中的，这样听起来BA d实现，如果您没有快速访问真实设备，可能容易混淆。
UPD2：好吧，受正面反馈启发:)实现了有点复杂的版本，它允许检测正确的，左边的，上下滑动的，它还需要清理，但你明白了。
$(function() {
var ftch, // first touch cache
lck = Math.sin(Math.PI/4); //lock value, sine of 45 deg configurable
var defSwipeDir = function (el, tchs) { // need define swaping direction, for better UX
if (typeof (tchs) !== 'object') return 0; // check if there was any movements since first touch, if no return 0
var ltch = tchs[tchs.length - 1], // last touch object
dx = ltch.pageX - ftch.pageX,
dy = ltch.pageY - ftch.pageY,
hyp = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)),
sin = dy/hyp,
cos = dx/hyp,
dir;
if (Math.abs(cos) >= lck) { // left or right swape
dir = cos > 0 ? 'r' : 'l';
} else { // up or down
dir = sin < 0 ? 'u' : 'd';
}
el.trigger('swipe', dir); // trigger custom swipe event
return dir; // and return direction too
}
$('.myelementTouchDetection').on('touchstart touchmove swipe', function (ev, d) {
var oev = ev.originalEvent,
myelementTouchDetection = $(this),
dir; // you may know swipes on move event too
switch (ev.type) {
case 'touchstart':
ftch = oev;
break;
case 'touchmove':
dir = defSwipeDir(myelementTouchDetection, oev.touches);
return false // cancel default behaiviour
break;
case 'swipe':
switch (d) {
case 'r': // swipe right
console.log('swipe right');
break;
case 'l': // swipe left
console.log('swipe left');
break;
case 'u': // swipe up
console.log('swipe up');
break;
case 'd': // swipe down
console.log('swipe down');
break;
}
break;
}
})
});
上面的NULL的答案对我很好，除了你不能在touchstart-bound函数中指定startCoords到endCoords。然后他们指向相同的对象，以便在endCoords得到更新时，startCoords也会更新。当触发事件触发时，startCoords将始终等于endCoords。
更新后的代码如下。这适用于在iOS 6.0上使用Safari的iPad 3。编辑也修复数学和显示错误，并删除数学。abs（）在touchend-bound函数内。还在touchmove-bound函数内添加了一个event.preventDefault（）调用，以便这些函数也可以在iOS上的Google Chrome上使用。
var startCoords = {}, endCoords = {};
$(document.body).bind("touchstart", function(event) {
endCoords = event.originalEvent.targetTouches[0];
startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
startCoords.pageY = event.originalEvent.targetTouches[0].pageY;
});
$(document.body).bind("touchmove", function(event) {
event.preventDefault();
endCoords = event.originalEvent.targetTouches[0];
});
$(document.body).bind("touchend", function(event) {
$('p').text("Your touch on the axis: " + (endCoords.pageX-startCoords.pageX) + "x, " + (endCoords.pageY-startCoords.pageY) + "y");
});
怪异，不knwo关于手机，但工作正常点击http://jsfiddle.net/nH2PU/ – Sinetheta
我希望这是不会有这么多的一个难倒的的。 ;） –
Android中出现同样的情况（2.2.2） – NoBugs