Question

我一直在阅读非常有用的书“Core HTML5 Canvas”，它包含了一个包含鼠标点击和触摸功能的样本。我的版本（非常类似于本书）如下：

function windowToCanvas(x, y) {
    var bbox = canvas.getBoundingClientRect();

    return { x: x - bbox.left * (canvas.width /bbox.width), y: y - bbox.top * (canvas.height / bbox.height)};
};

canvas.ontouchstart = function(e) {
    e.preventDefault(e);
    MTStart(windowToCanvas(e.pageX, e.pageY));
};

canvas.ontouchmove = function(e) {
    e.preventDefault(e);
    MTMove(windowToCanvas(e.pageX, e.pageY));
};

canvas.ontouchend = function(e) {
    e.preventDefault(e);
    MTEnd(windowToCanvas(e.pageX, e.pageY));
};

canvas.onmousedown = function(e) {
    e.preventDefault(e);
    MTStart(windowToCanvas(e.pageX, e.pageY));
};

canvas.onmousemove = function(e) {
    e.preventDefault(e);
    MTMove(windowToCanvas(e.pageX, e.pageY));
};

canvas.onmouseup = function(e) {
    e.preventDefault(e);
    MTEnd(windowToCanvas(e.pageX, e.pageY));
};

function MTStart(location) {
    console.log("Mouse down");
    document.getElementById('message').innerHTML = 'MT Start x: ' + location.x + ', y: ' + location.y;
};

function MTMove(location) {

};

function MTEnd(location) {
    console.log("Mouse up");
    document.getElementById('message').innerHTML = 'MT End x: ' + location.x + ', y: ' + location.y;
};

鼠标可以正常使用。但是，在iphone或ipad上的safari上运行时，ontouchstart似乎报告了正确的位置，而ontouchend却没有。无论我在哪里触摸，Ontouchend都会给出相同的坐标。我注意到它返回的坐标似乎改变了，当且仅当我滚动页面并触摸画布中的相同位置时。

知道为什么ontouchstart和ontouchend会给出不同的位置值吗？

谢谢！

Answer 1

所以，事实证明我需要使用：

MTEnd(windowToCanvas(e.changedTouches[0].pageX, e.changedTouches[0].pageY));

但仅限于ontouchend，而不是ontouchstart。

ontouchend ios返回错误的坐标

1 个答案: