jQuery(Swipe vs. Touch)pageX和pageY一直返回0

Question

我在iPhone上玩touchstart和touchend事件.我构建了一个具有div的示例页面,如果您触摸它并滚动页面,它应该返回开始和结束位置的y坐标.

链接:http://jsbin.com/ibemom/2

jQuery:

var touchStartPos;

$('.theDiv')
  .bind('touchstart', function(e){
    touchStartPos = e.pageY;
  })
  .bind('touchend', function(e){
    alert(touchStartPos + ' | ' + e.pageY)
  })   

但是,当我在iPhone上加载该页面时,警报会将两个值都报告为零.有人看到我有什么问题吗？

更新:

我偶然发现了jQuery Mobile项目中的这段代码:https://github.com/jquery/jquery-mobile/issues/734

它的评论突出:

 // (in iOS event.pageX and event.pageY are always 0 )

它没有说明为什么会这样,但至少我发现其他人看到了同样的事情.将挖掘该页面上的示例代码以查看解决方案是否存在.

更新II:

好吧,在查看上面链接中的示例代码后,看起来这将返回一个实际值:

e.originalEvent.touches[0].pageY

问题是,我现在意识到这不是我需要的.它将我附加事件的对象触摸区域的Y偏移返回到与HTML文档相关的...而不是浏览器窗口.

我的目标是弄清楚触摸开始的位置和结束位置......然后比较值.如果它们有点不同,那么我们就会进行滑动...而不是触摸.

更新III:

我也找到了这些例子的参考:

e.originalEvent.touches[0].pageX

event.targetTouches[0].pageY

虽然我似乎无法让那些工作.两者都返回未定义的错误.

更新IV:

看起来一种解决方案是跟踪文档本身的offset().我可以将touchend事件应用于文档,然后检查它的偏移量.

这个问题是我的touchend事件将首先触发我页面上的元素,然后它会在文档上触发它(冒泡).因此,在我需要弄清楚如何对象touchend事件之前,我无法确定它是触摸还是滑动.

还在思考这一个......

Answer 1

好的快速回答是当手指离开屏幕时你无法检测到触摸(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