触摸事件等效于鼠标按下 [英] Touch event equivalent to mouse down

问题描述

我正在尝试在画布上使用mouse:down事件，例如:

I'm trying to use a mouse:down event on canvas like:

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

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

How can I use touchstart event handler?

推荐答案

我希望这会有所帮助

// 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
}

这篇关于触摸事件等效于鼠标按下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！