how to handle touch on smartphone's browsers - javascript

Question

I want to handle touch listener on smartphones. my codes works fine with mousedown,mousemove,mouseup,mouseout on web browsers.

    canvas.addEventListener("mousedown", function(event) {
        event.preventDefault();
        var p = get_mouse_position(event);
        for( var i=0; i<4; i++ ) {
            var x = points[i][0];
            var y = points[i][1];
            if( p.x < x + 10 && p.x > x - 10 && p.y < y + 10 && p.y > y - 10 ) {
                drag = i;
                break;
            }
        }
    }, false);
    canvas.addEventListener("mousemove", function(event) {
        event.preventDefault();
        if(drag == null) { return; }
        var p = get_mouse_position(event);
        points[drag][0] = p.x;
        points[drag][1] = p.y;
        prepare_lines(ctx2, points, true);
        draw_canvas(ctx, ctx1, ctx2);
    }, false);
    canvas.addEventListener("mouseup", function(event) {
        event.preventDefault();
        if(drag == null) { return; }
        var p = get_mouse_position(event);
        points[drag][0] = p.x;
        points[drag][1] = p.y;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx1.clearRect(0, 0, canvas.width, canvas.height);
var s = (new Date()).getTime();
        op.draw(points);
document.getElementById("ms").innerHTML = ( (new Date()).getTime() - s );
        prepare_lines(ctx2, points);
        draw_canvas(ctx, ctx1, ctx2);
        drag = null;
    }, false);
    canvas.addEventListener("mouseout", function(event) {
        event.preventDefault();
        drag = null;
    }, false);
    canvas.addEventListener("mouseenter", function(event) {
        event.preventDefault();
        drag = null;
    }, false);

like this demo:

http://www.html5.jp/test/perspective_canvas/demo1_en.html

https://github.com/wanadev/perspective.js/

but my codes doesn't work on smartphone's browsers.

I added touchstart,touchmove,touchend listener like same codes on click listeners. but on smartphone's browsers my edges dosn't move at all.

touch listerns:

canvas.addEventListener('touchstart', function(event){
        event.preventDefault();

        var p = get_mouse_position(event);
        for( var i=0; i<4; i++ ) {
            var x = points[i][0];
            var y = points[i][1];
            if( p.x < x + 10 && p.x > x - 10 && p.y < y + 10 && p.y > y - 10 ) {
                drag = i;
                break;
            }
        }
    }, false);

    canvas.addEventListener('touchmove', function(event){
        event.preventDefault();
        if(drag == null) { return; }
        var p = get_mouse_position(event);
        points[drag][0] = p.x;
        points[drag][1] = p.y;
        prepare_lines(ctx2, points, true);
        draw_canvas(ctx, ctx1, ctx2);
    }, false);

    canvas.addEventListener('touchend', function(event){
        event.preventDefault();

        if(drag == null) { return; }
        var p = get_mouse_position(event);
        points[drag][0] = p.x;
        points[drag][1] = p.y;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx1.clearRect(0, 0, canvas.width, canvas.height);
var s = (new Date()).getTime();
        op.draw(points);
document.getElementById("ms").innerHTML = ( (new Date()).getTime() - s );
        prepare_lines(ctx2, points);
        draw_canvas(ctx, ctx1, ctx2);
        drag = null;
    }, false);

I want to handle 4-edges on smartphone's browsers like web browsers. but I can't move 4-edges on smartphone's browsers.

Answer 1

TouchEvent可能由多个Touch对象组成（a.k.a多点触控） 这些不同的Touch对象可通过活动的.touches TouchList属性获得。

只有这些对象会保存您感兴趣的坐标，因此，在您的处理程序中，您需要选择其中一个Touch对象，这通常是第一个（单点触控应用程序）。

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');
// attach all our handlers
canvas.addEventListener('mousedown', handleDown);
canvas.addEventListener('touchstart', handleDown);
document.addEventListener('mouseup', handleUp);
document.addEventListener('touchend', handleUp);
document.addEventListener('mousemove', handleMove);
document.addEventListener('touchmove', handleMove);

var mouse = {
  lastX: null,
  lastY: null,
  x: null,
  y: null,
  down: false
};

// Here we want to check whether it is a touch event or a mouse event
function update_coords(evt) {
  evt.preventDefault();
  var ev;
  // touch event?
  if (evt.touches && evt.touches.length) {
    ev = evt.touches[0];
  } else ev = evt; // mouse
  var rect = canvas.getBoundingClientRect();

  // update our mouse object
  mouse.lastX = mouse.x;
  mouse.lastY = mouse.y;
  mouse.x = ev.clientX - rect.left;
  mouse.y = ev.clientY - rect.top;
}

function handleDown(evt) {
  mouse.down = true;
  update_coords(evt);
  draw();
}

function handleUp(evt) {
  mouse.down = false;
  mouse.lastX = mouse.lastY = mouse.x = mouse.y = null;
}

function handleMove(evt) {
  if (mouse.down) {
    update_coords(evt);
    draw();
  }
}

function draw() {
  if(mouse.lastX === null) return;
  ctx.beginPath();
  ctx.moveTo(mouse.lastX, mouse.lastY);
  ctx.lineTo(mouse.x, mouse.y);
  ctx.stroke();
}

canvas{
  border: 1px solid;
}

<canvas id="canvas" width="500" height="300"></canvas>

<子> 要在移动设备上进行测试，请切换到Stackoverflow的完整站点版本（位于页面底部）或试用此fiddle。