jQuery(Swipe vs. Touch)pageX和pageY保持返回0

前端之家收集整理的这篇文章主要介绍了jQuery(Swipe vs. Touch)pageX和pageY保持返回0前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在玩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 )

这不是说为什么会这样,但至少我发现别人看到同样的事情。将浏览该页面上的示例代码,以查看解决方案是否存在。

更新二:

那么,在查看上面的链接中的示例代码之后,它将会返回一个实际的值:

e.originalEvent.touches[0].pageY

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

我的目标是找出屏幕上触摸开始的位置,以及它在哪里结束…然后比较值。如果他们有点不一样,那么我们发现刷卡被执行了,而不是触摸。

更新三:

我也在寻找这些例子:

e.originalEvent.touches[0].pageX

event.targetTouches[0].pageY

虽然我似乎也不能让那些工作。两者都返回未定义的错误

更新四:

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

这个问题是我的touchend事件将首先触发我的页面上的元素,然后它会在文档(冒泡)上触发它。所以我不能确定是否触摸或滑动之前,我需要弄清楚在对象touchend事件做什么。

还在思考这个…

解决方法

好的,快速的答案是,当手指离开屏幕(touchend)时,您无法检测到触摸。

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

现在到解决方法。或者称之为你想要的也许没有检测到触摸事件是有意义的,因为触摸已经结束。

在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",y: " + endCoords.pageY);
});

现在尝试点击您的设备!

一些最后的注释将是:Make to variables: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

原文链接:https://www.f2er.com/jquery/182222.html

猜你在找的jQuery相关文章