移动设备的 X/Y 触摸坐标

Question

我正在创建一个希望在移动设备上使用的网络应用程序。 所述应用程序的初始机制需要鼠标的当前 X/Y 坐标——这不需要单击和拖动，只需简单地在浏览器窗口中移动鼠标即可。

现在我一直在研究有关触摸和手势的各种 jQuery/Javascript 库，但我找不到任何适合我所追求的东西。

所以基本上我正在寻找一种方法来获取单指触摸/拖动的 x/y 位置。

例如：在 0、0 处触摸屏幕，然后按住并拖动到 480,320。然后这些值将在 x1、y1 到 x2、y2 之间进行插值。

谢谢。

Answer 1

$(function() {
    var $log = $("#log");

    function updateLog(x, y) {
        $log.html('X: '+x+'; Y: '+y);
    }

    document.addEventListener('touchstart', function(e) {
        updateLog(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    }, false);

    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
        updateLog(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
    }, false);
});

Answer 2

您不需要为此使用库，使用 touchstart、touchmove 和 touchend 事件编写自己的代码相当容易。

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

附带说明，如果您使用 iOS 模拟器进行测试，请注意它有时会以实际设备无法提供的方式提供不正确的坐标，因此您始终需要保留物理 iOS方便验证您的代码是否有效的设备。