jQuery - 访问 X 和 Y 坐标（自定义事件）答案

【问题标题】：jQuery - Access X and Y coordinates (custom event)jQuery - 访问 X 和 Y 坐标（自定义事件）
【发布时间】：2014-11-18 20:52:53
【问题描述】：

我正在制作一张图片幻灯片并启用触控功能。我正在使用本文中提到的代码 sn-p 来执行此操作：http://blog.safaribooksonline.com/2012/04/18/mapping-mouse-events-and-touch-events-onto-a-single-event/

作者提到，通过使用他的代码，触发触摸事件的标准化事件，X 和 Y 坐标的访问变得更加容易。这正是我发现困难的地方。我似乎根本无法访问这些值。我已经尝试了我能想到的一切。

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

标准化事件：

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 很陌生

【问题讨论】：

标签： jquery function events return coordinates

【解决方案1】：

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

function onDownEvent(e){

    console.log('X = ' + e.clientX);
    console.log('Y = ' + e.clientY);
}

您可以阅读更多here

【讨论】：

快速说明：clientX 和 clientY 不是基于文档，而是基于视口。这意味着如果您有一个可以滚动的页面，则可能存在歧义。来源：bennadel.com/blog/…
这将导致：X = undefined | Y = 未定义 @AndreiR

【解决方案2】：

我知道这个问题已经够老了，但是在使用 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;
    });

第一个函数将在您启动时返回您在浏览器中触摸位置的 x/y。第二个将为您提供浏览器中触摸位置的 x/y，但每次移动手指时都会调用。

除了定位“clientX”/“clientY”，您还可以定位：

screenX/screenY - 这就是您在设备屏幕上触摸的位置，而客户端则位于浏览器窗口内。
pageX/pageY - 它认为从文档或网页的左上角而不是浏览器屏幕或设备屏幕的左上角获取值。

【讨论】：