jQuery(滑动与触摸)pageX和pageY始终返回0 [英] jQuery (Swipe vs. Touch) pageX and pageY keep returning 0

问题描述

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

I'm playing with touchstart and touchend events on my iPhone. I built a sample page that has div that if you touch it and scroll the page, it should return the y coordinates of the start and end positions.

链接: 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上加载该页面时，警报将两个值都报告为零.有人看到我的东西有什么问题吗?

When I load that page on my iPhone, however, the alert keeps reporting both values as zero. Anyone see anything wrong with what I have?

更新:

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

I stumbled across this bit of code in the jQuery Mobile project: https://github.com/jquery/jquery-mobile/issues/734

对此发表评论:

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

没有说为什么是这样，但是至少我发现其他人也看到相同的东西.将翻阅该页面上的示例代码以查看解决方案是否存在.

It doesn't say why that's the case, but at least I found someone else that sees the same thing. Will dig through the sample code on that page to see if the solution is there.

更新II:

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

Well, after looking through the sample code in the link above, it looks like this will return an actual value:

e.originalEvent.touches[0].pageY

要抓住的是，我现在意识到我并不需要.它返回我在将事件附加到与HTML文档有关的对象中而不是浏览器窗口中接触的对象的区域的Y偏移量.

The catch is, I now realize that's not quite I need. It's returning the Y offset of the area I touched within the object I attached the event to IN RELATION TO THE HTML DOCUMENT...rather than the browser window.

我的目标是弄清楚触摸在屏幕上的何处开始以及在何处结束...然后比较这些值.如果它们有很大不同，那么我们保证执行了轻扫操作……而不是轻触.

My goal is to figure out where on the screen the touch started, and where it ended...and then compare the values. If they are quite a bit different, then we assue a swipe was performed...rather than a touch.

更新III:

我还找到了这些示例的引用:

I'm also finding references to these examples:

e.originalEvent.touches[0].pageX

event.targetTouches[0].pageY

尽管我似乎也无法使它们工作.两者都返回未定义的错误.

Though I can't seem to get those to work either. Both return undefined errors.

更新四:

似乎一种解决方案是在文档本身上跟踪offset().我可以将touchend事件应用于文档，然后检查其偏移量.

It looks like one solution is to track offset() on the document itself. I can apply a touchend event to the document, and then check it's offset.

问题是我的touchend事件将首先在页面上的元素上触发，然后将其触发到文档上(冒泡).因此，在确定需要处理对象touchend事件之前，我实际上无法确定是触摸还是轻扫.

The problem with this is that my touchend event will first trigger on the element on my page and THEN it'll fire it on the document (bubbling). So I can't actually determine if it was a touch or swipe BEFORE I need to figure out what to do on the objects touchend event.

仍然在思考这个问题...

Still pondering this one...

推荐答案

好吧，快速的答案是手指离开屏幕(touchend)时无法检测到触摸.

Ok the quick answer is you can't detect a touch when the finger leaves the screen (touchend).

我的第一个示例证明: http://jsfiddle.net/Y4fHD/

My first example proves that: http://jsfiddle.net/Y4fHD/

现在可以解决方法.或称它为您想要的.也许没有检测到touchend事件是有道理的，因为触摸已经结束了.

Now to the workaround. Or call it what you want. Maybe it makes sense not detection on the touchend event because the the touch has ended.

在touchmove事件上绑定处理程序: http://jsfiddle.net/Y4fHD/1/

Bind the handler on the touchmove event: http://jsfiddle.net/Y4fHD/1/

var endCoords = {};
$(document.body).bind("touchmove", function(event) {
    endCoords = event.originalEvent.targetTouches[0];
});

然后使用变量endCoords确定最后一次触摸

And then use the variable endCoords to determinate the last touch

$(document.body).bind("touchend", function(event) {
    $('p').text("Your end coords is: x: " + endCoords.pageX + ", y: " + endCoords.pageY);
});

确定尝试点击您的设备！然后错误仍然会发生:为什么?因为你没有动弹.

Ok try to just tap your device! Then the error still will ocure: Why? Because you havn't moved your touch.

如果我们都已经准备好在touchstart中定义endCoords变量，那么我们就在这里: http://jsfiddle.net/Y4fHD /2/

If we all ready in the touchstart defines the endCoords variable we are there: http://jsfiddle.net/Y4fHD/2/

var endCoords = {};
$(document.body).bind("touchstart touchmove", function(event) {
    endCoords = event.originalEvent.targetTouches[0];
});

然后使用变量endCoords确定最后一次触摸

And then use the variable endCoords to determinate the last touch

$(document.body).bind("touchend", function(event) {
    $('p').text("Your end coords is: x: " + endCoords.pageX + ", y: " + endCoords.pageY);
});

现在尝试点击您的设备！

Now try to tap your device!

最后的一些注意事项是:制作变量:startCoords和endCoords，然后在touchend事件中使用它们: http ://jsfiddle.net/Y4fHD/3/

Some final notes will be: Make to variables: startCoords and endCoords then use these in the touchend event: 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

Note:
None of the above examples are tested, hopes it works!
Math.abs gives me the absolute value of a number eg: -5 becomes 5

这篇关于jQuery(滑动与触摸)pageX和pageY始终返回0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！