javascript - 离开 Canvas 时 touchleave 不会触发 jQuery

Question

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

我正在尝试添加触摸事件，除了 touchleave 之外，所有触摸事件都有效。当用户尝试将图像拖到 Canvas 之外时，touchleave 事件似乎不会触发。是否有其他触摸事件可以用于此目的？

Answer 1

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

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