JavaScript Element gestureend Event

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.addEventListener("gestureend", (event) => {
  out.textContent =
    "final scale=" + event.scale.toFixed(3) +
    " rotation=" + event.rotation.toFixed(1) + "°";
});

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.ongestureend = (event) => {
  out.textContent = "ongestureend scale=" + event.scale.toFixed(3);
};

const out = document.getElementById("out");
const supported = typeof window.GestureEvent === "function" ||
  "ongestureend" in window;

out.textContent = supported
  ? "GestureEvent / ongestureend looks available (likely WebKit)."
  : "No GestureEvent here — use Touch/Pointer fallback.";

if (supported) {
  document.getElementById("stage").addEventListener("gestureend", (e) => {
    out.textContent = "Ended with scale=" + e.scale.toFixed(3);
  });
}

const stage = document.getElementById("stage");
const card = document.getElementById("card");
const out = document.getElementById("out");
let base = 1;

stage.addEventListener("gesturestart", (event) => {
  event.preventDefault();
  base = Number(card.dataset.scale || 1);
});

stage.addEventListener("gesturechange", (event) => {
  event.preventDefault();
  const next = base * event.scale;
  card.style.transform = "scale(" + next + ")";
  card.dataset.live = String(next);
});

stage.addEventListener("gestureend", (event) => {
  const committed = Number(card.dataset.live || base * event.scale);
  card.dataset.scale = String(committed);
  card.style.transform = "scale(" + committed + ")";
  out.textContent = "Committed scale=" + committed.toFixed(3);
});

const stage = document.getElementById("stage");
const out = document.getElementById("out");
let startDist = 0;
let liveScale = 1;

function distance(t0, t1) {
  const dx = t0.clientX - t1.clientX;
  const dy = t0.clientY - t1.clientY;
  return Math.hypot(dx, dy);
}

stage.addEventListener("touchstart", (event) => {
  if (event.touches.length === 2) {
    startDist = distance(event.touches[0], event.touches[1]);
  }
}, { passive: true });

stage.addEventListener("touchmove", (event) => {
  if (event.touches.length === 2 && startDist > 0) {
    liveScale = distance(event.touches[0], event.touches[1]) / startDist;
    out.textContent = "live scale≈" + liveScale.toFixed(3);
  }
}, { passive: true });

stage.addEventListener("touchend", (event) => {
  if (event.touches.length < 2 && startDist > 0) {
    out.textContent = "committed (touchend) scale≈" + liveScale.toFixed(3);
    startDist = 0;
  }
}, { passive: true });

if ("GestureEvent" in window) {
  stage.addEventListener("gestureend", (event) => {
    out.textContent = "gestureend scale=" + event.scale.toFixed(3);
  });
}