时间戳

首页 > 解决方案 > Touchmove 在移动设备上不起作用，例如桌面上的 mousemove

javascript - Touchmove 在移动设备上不起作用，例如桌面上的 mousemove

问题描述

编辑：我注意到如果我快速触摸屏幕，就会形成一个点。当您触摸屏幕然后在画布上移动它时，页面本身在移动，我想知道这是否与滚动有关？

我有绘图页，一切都在桌面上正常工作，但不是移动设备。这是我的页面的简单摘要：

        
            var canvas, ctx, flag = false,
            prevX = 0,
            currX = 0,
            prevY = 0,
            currY = 0,
            dot_flag = false;
    
        var x = "black",
            y = 2;
        
        function candraw() {
            canvas = document.getElementById('can');
            ctx = canvas.getContext("2d");
            w = canvas.width;
            h = canvas.height;
        
    canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
    }, false);
    canvas.addEventListener("touchmove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
    }, false);
    canvas.addEventListener("touchstart", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("touchend", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
    canvas.addEventListener("touchcancel", function (e) {
        findxy('out', e)
    }, false);
            
            
            
        }
        
    
        
        function draw() {
            ctx.beginPath();
            ctx.moveTo(prevX, prevY);
            ctx.lineTo(currX, currY);
            ctx.strokeStyle = x;
            ctx.lineWidth = y;
            ctx.stroke();
            ctx.closePath();
        }
        
        
        function findxy(res, e) {
            if (res == 'down') {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
        
                flag = true;
                dot_flag = true;
                if (dot_flag) {
                    ctx.beginPath();
                    ctx.fillStyle = x;
                    ctx.fillRect(currX, currY, 2, 2);
                    ctx.closePath();
                    dot_flag = false;
                }
            }
            if (res == 'up' || res == "out") {
                flag = false;
            }
            if (res == 'move') {
                if (flag) {
                    prevX = currX;
                    prevY = currY;
                    currX = e.clientX - canvas.offsetLeft;
                    currY = e.clientY - canvas.offsetTop;
                    draw();
                }
            }
        }
        
        
        
   candraw();
<html>
        <body>
          <canvas id="can" width="400" height="400" style="border:2px solid;">             </canvas>
          </body>
</html>

我希望touchmove, touchstart,touchend像mousemove,一样工作mousedown，mouseup但这些不起作用或工作方式不同。结果我不能在手机上画画。我怎么解决这个问题？

标签： javascript

解决方案

我解决了我的问题，javascript 使用 e.clientX 和 e.clientY 仅用于桌面。所以对于移动设备，我们必须使用这样的触摸：e.touches[0].clientX，e.touches[0].clientY。功能 findxy 必须是这样的（如果您想使用移动设备和台式机，则不要仅使用触摸，您需要使用我已经在下面使用的设备检测器）：

function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
currX = e.touches[0].clientX - canvas.offsetLeft;
currY = e.touches[0].clientY - canvas.offsetTop;
}else{
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
}


flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
currX = e.touches[0].clientX - canvas.offsetLeft;
currY = e.touches[0].clientY - canvas.offsetTop;
}else{
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
}
draw();
}
}
}

推荐阅读