Question

我基本上使用它来使我的图像在画布中可拖动。 Make image drawn on canvas draggable with JavaScript

我正在尝试添加触摸事件，并且所有触摸事件都起作用，除了touchleave。当用户尝试将图像拖动到画布外时，touchleave事件似乎不会触发。是否有不同的触摸事件可用于此目的？

Answer 1

请参阅this。在这里他们实际上是触发鼠标事件触摸evnts。这可能会对你有所帮助。

touchstart – to toggle drawing mode “on”
touchend – to toggle drawing mode “off”
touchmove – to track finger position, used in drawing


// Set up touch events for mobile, etc
canvas.addEventListener("touchstart", function (e) {
        mousePos = getTouchPos(canvas, e);
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousedown", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchend", function (e) {
  var mouseEvent = new MouseEvent("mouseup", {});
  canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchmove", function (e) {
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousemove", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
}, false);

// Get the position of a touch relative to the canvas
function getTouchPos(canvasDom, touchEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - rect.left,
    y: touchEvent.touches[0].clientY - rect.top
  };
}

离开画布时，touchleave没有触发jQuery

1 个答案: