Question

我正在处理图片幻灯片并启用触控功能。我是通过使用本文中提到的代码段来完成此操作的：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的新手

Answer 1

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

function onDownEvent(e){

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

您可以阅读更多here

Answer 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 - 相信从文档或网页的左上角获取值，而不是浏览器屏幕或设备屏幕的值。

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

2 个答案: