触摸事件等效于鼠标向下

Question

我正在尝试使用鼠标：down than canvas上的事件：

canvas.on('mouse:down', function(options) {}

如何使用touchstart事件处理程序？

Answer 1

我希望这会有所帮助

// TOUCH EVENTS
canvas.addEventListener("touchstart", function (e) {
  e.preventDefault();
  var mousePos = getTouchPos(canvas, e);
  var touch = e.touches[0];
  // do_mouse_click_logic(mousePos.x, mousePos.y, touch.clientX, touch.clientY);
}, false);
canvas.addEventListener("touchend", function (e) {
  e.preventDefault();
  var mousePos = getTouchPos(canvas, e);
  // do_mouse_up_logic(mousePos.x, mousePos.y);
}, false);
canvas.addEventListener("touchmove", function (e) {
  e.preventDefault();
  var mousePos = getTouchPos(canvas, e);
  var touch = e.touches[0];
  // do_mouse_move_logic(mousePos.x, mousePos.y, touch.clientX, touch.clientY);
}, false);
function getTouchPos(canvasDom, touchEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - rect.left,
    y: touchEvent.touches[0].clientY - rect.top
  };
}

// MOUSE EVENTS
canvas.addEventListener('mousedown', function(evt) {
  evt.preventDefault();
  var mousepos = get_mouse_pos(canvas, evt);
  // do_mouse_click_logic(mousepos.x, mousepos.y, evt.pageX, evt.pageY);
}, false);
canvas.addEventListener('mousemove', function(evt) {
    evt.preventDefault();
    var mousepos = get_mouse_pos(canvas, evt);
    // do_mouse_move_logic(mousepos.x, mousepos.y, evt.pageX, evt.pageY);
});
canvas.addEventListener('mouseup', function(evt) {
    evt.preventDefault();
    var mousepos = get_mouse_pos(canvas, evt);
    // do_mouse_up_logic(mousepos.x, mousepos.y);
}, false);
function get_mouse_pos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}
function do_mouse_click_logic(x, y, page_x, page_y) {
  // Do your stuff
}
function do_mouse_move_logic(x, y, page_x, page_y) {
  // Do your stuff
}
function do_mouse_up_logic(x, y) {
  // Do yuor stuff
}