jQuery – 访问X和Y坐标(自定义事件)

我正在处理图像幻灯片并启用触摸function。 我是通过使用本文中提到的代码片段来完成此操作的: http : //blog.safaribooksonline.com/2012/04/18/mapping-mouse-events-and-touch-events-onto-a-single-event /

作者提到,通过使用触发事件触发规范化事件的代码,X和Y坐标的访问变得更加容易。 这正是我发现的困难。 我似乎无法访问这些值。 我已经尝试了所有可以想到的东西。

这是代码: http : //jsfiddle.net/BC8dr/3/

normalizeEvent:

function normalizeEvent(type, original, x, y){ return jQuery.Event(type, { pageX: x, pageY: y, originalEvent: original }); } 

在代码的底部,我评论了我不能访问的地方:

 jQuery(current_slide).bind(TouchMouseEvent.DOWN, onDownEvent); function onDownEvent(e){ // This is where I need X and Y coordinate access // This will return result: undefined var x = e.pageX; console.log(x); }​ 

所以我的问题是:如何访问X和Y坐标?

*注意:我是JS / jQuery的新手

您可以使用event.clientX event.clientY接收X和Y坐标,以便在您的情况下

 function onDownEvent(e){ console.log('X = ' + e.clientX); console.log('Y = ' + e.clientY); }​ 

你可以在这里阅读更多

我知道这个问题已经足够老了但是当使用e.pageY e.PageX时我在Android手机上遇到了问题。

如何通过定位事件的不同值来解决此问题,例如:

 $(window).on("touchstart", function(event){ var touchStartY = event.originalEvent.touches[0].clientY; var touchStartX = event.originalEvent.touches[0].clientX; }); $(window).on("touchmove", function(event){ var touchMoveY = event.originalEvent.touches[0].clientY; var touchMoveX = event.originalEvent.touches[0].clientX; }); 

第一个function将在您启动时返回您在浏览器中触摸的位置的x / y。 第二个将显示您在浏览器中触摸的位置的x / y,但每次移动手指时都会调用它。

您可以定位以下内容,而不是定位“clientX”/“clientY”:

  • screenX / screenY – 相信是您在设备屏幕上触摸的位置,而客户端就在浏览器窗口中。
  • pageX / pageY – 相信从文档或网页的左上角而不是浏览器屏幕或设备屏幕获取值。