JavaScript Element webkitmouseforcechanged Event

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

pad.addEventListener("webkitmouseforcechanged", (event) => {
  out.textContent = "webkitForce = " + event.webkitForce.toFixed(3);
});

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

pad.onwebkitmouseforcechanged = (event) => {
  out.textContent = "onwebkitmouseforcechanged · " +
    event.webkitForce.toFixed(3);
};

const out = document.getElementById("out");
const supported =
  "onwebkitmouseforcechanged" in window ||
  "onwebkitmouseforcechanged" in document.documentElement;

out.textContent = supported
  ? "Force Touch event properties look available (likely Safari)."
  : "No webkitmouseforcechanged here — use PointerEvent.pressure.";

if (supported) {
  document.getElementById("pad").addEventListener(
    "webkitmouseforcechanged",
    (event) => {
      out.textContent = "Pressure: " + event.webkitForce.toFixed(3);
    }
  );
}

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

pad.addEventListener("webkitmouseforcechanged", (event) => {
  const f = event.webkitForce;
  const click = MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN;
  const forceClick = MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;

  let level = "light";
  if (f >= forceClick) level = "force-click";
  else if (f >= click) level = "click";

  out.textContent =
    level + " · webkitForce=" + f.toFixed(3) +
    " (click≥" + click + ", force≥" + forceClick + ")";
});

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

function log(msg) {
  out.textContent = msg;
}

const forceOk = "onwebkitmouseforcechanged" in window;

if (forceOk) {
  pad.addEventListener("webkitmouseforcewillbegin", () => log("willbegin"));
  pad.addEventListener("webkitmouseforcechanged", (e) =>
    log("changed · " + e.webkitForce.toFixed(3))
  );
  pad.addEventListener("webkitmouseforcedown", () => log("forcedown"));
  pad.addEventListener("webkitmouseforceup", () => log("forceup"));
} else {
  pad.addEventListener("pointerdown", (e) => {
    log("pointerdown · pressure=" + e.pressure);
  });
  pad.addEventListener("pointermove", (e) => {
    if (e.buttons) log("pointermove · pressure=" + e.pressure);
  });
}