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事件做什么。
还在思考这个…
解决方法
我的第一个例子证明: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