jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery(Swipe vs. Touch)pageX和pageY保持返回0大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在玩iPhone上的touchstart和touchend活动。我创建了一个具有div的示例页面,如果您触摸它并滚动页面它将返回@R_801_11117@和结束位置的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

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

更新四:

看起来像一个解决方案是跟踪文档本身的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);
});

好的,只需点击您的设备!那么@L_874_16@仍然会发生:为什么?因为你没有移动你的触摸

如果我们都准备好在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

大佬总结

以上是大佬教程为你收集整理的jQuery(Swipe vs. Touch)pageX和pageY保持返回0全部内容,希望文章能够帮你解决jQuery(Swipe vs. Touch)pageX和pageY保持返回0所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。