离开画布jQuery时touchleave不触发

Question

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

我正在尝试添加触摸事件，并且所有触摸事件都有效，除了 touchleave。当用户尝试将图像拖到画布外时，似乎没有触发 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
  };
}