Antwort an „Der sehr geehrte Herr Christian“ verfassen

Mobiles Chrome Browser pointer event Desaster

Der sehr geehrte Herr Christian 10.11.2025 14:10

Sehr geehrte Damen und Herren! Sehr geehrtes Dazwischen! Liebe Kinder,

mich treibt der mobile Chrome Browser gerade in den Wahnsinn (Firefox ist brav).

"pointercancel" scheint post "pointerdown" gefolgt von "pointermove" ausgelöst zu werden (daher, kommt das Element nach "pointermove" "zum Stillstand", wird plötzlich handlePointerCancelQuirk ausgeführt).

Dieses Phänomen tritt nur auf dem tatsächlich mobilen Endgerät (Handy) auf, die Mobilanzeige der Desktop Chrome-Entwicklertools zeigt dieses Verhalten NICHT (daher, wer dieses Verhalten testen will, bitte lokal einen Webserver starten und mit dem mobilen Endgerät auf Chrome aufrufen).

Diesbezügliche Präzedenz suche ich im WWW vergeblich - ist das ein bekannter Chrome-Quirk? Irgendwelche Workarounds?

Danke für Rat und Tat nach anfänglich intensivem Augenrollen.

LG, Christian.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mobile Chrome Quirks</title>
    <style>
      * {
        -webkit-user-select: none;
        user-select: none; /* TEMPORÄR UM user-select AUSZUSCHLIESSEN, bitte keine Kritik, danke Gunnar */
      }
      .dragging {
        z-index: 10;
        position: absolute;
        pointer-events: none;
        background-color: orangered;
        touch-action: none; /* Key fix for Chrome mobile? */
      }
      /*

      <
      ~~~~~~~~~~~~~~~~~~~~~~~~
      VERSUCH 1:
      Hilft fixed width/height ?
      >

      */
      article * {
        padding: 1rem;
        background-color: mediumaquamarine;
        width: 100px;
        height: 100px;
      }
      /*

      </
      ~~~~~~~~~~~~~~~~~~~~~~~~
      VERSUCH 1:
      Hilft fixed width/height ?
      > ...NOPE

      */
    </style>
  </head>
  <body>
    <main>
      <section>
        <h2>My Section!</h2>
        <article>
          <h3 class="name">My Important Article!</h3>
          <p class="other">A, G, X</p>
          <p class="beschreibung">Item 1, Item 2, Item 3, Item 4</p>
          <p class="preis">zu teuer</p>
        </article>
      </section>
    </main>
    <script>
      const main = document.querySelector("main");
      let shiftX, shiftY;
      let dragged = null;
      // Critical: touchmove scrolling verhindern
      function preventScrollWhileDragging(e) {
        e.preventDefault();
      }

      window.addEventListener("touchmove", preventScrollWhileDragging, {
        passive: false,
      });

      function moveAt(pageX, pageY) {
        dragged.style.left = pageX - shiftX + "px";
        dragged.style.top = pageY - shiftY + "px";
      }

      window.addEventListener("pointerdown", (e) => {
        e.preventDefault();
        let el = e.target;
        /*

        <
        ~~~~~~~~~~~~~~~~~~~~~~~~
        VERSUCH 2:
        Hilft pointerCapture ?
        >

        */
        el.setPointerCapture(e.pointerId);
        /*

        </
        ~~~~~~~~~~~~~~~~~~~~~~~~
        VERSUCH 2:
        Hilft pointerCapture ?
        > ...NOPE

        */
        const rect = el.getBoundingClientRect();
        shiftX = e.clientX - rect.left;
        shiftY = e.clientY - rect.top;
        dragged = e.target;

        e.target.classList.add("dragging");
        window.addEventListener("pointermove", onPointerMove, {
          passive: false,
        });
        window.addEventListener("pointerup", onPointerUp, { passive: false });
        window.addEventListener("pointercancel", onPointerUp, {
          passive: false,
        });
        moveAt(e.pageX, e.pageY);
      });

      function onPointerMove(e) {
        e.preventDefault();
        moveAt(e.pageX, e.pageY);
      }

      function onPointerUp(e) {
        e.preventDefault();
        e.target.releasePointerCapture(e.pointerId);
        e.target.classList.remove("dragging");
        window.removeEventListener("pointermove", onPointerMove, {
          passive: false,
        });
        window.removeEventListener("pointerup", onPointerUp, {
          passive: false,
        });
        window.removeEventListener("pointercancel", onPointerUp, {
          passive: false,
        });
      }

      // QUIRK

      function handlePointerCancelQuirk(e) {
        const myLog = `Pointer cancel on: ${e.target.innerHTML}`;
        document.body.innerHTML = myLog;
        document.body.innerHTML += `<button type="button" onclick="window.location.reload()">Refresh Page</button>`;
        console.log("Pointer cancel on:", e.target, "at", e.clientX, e.clientY);
      }

      window.addEventListener("pointercancel", handlePointerCancelQuirk);
    </script>
  </body>
</html>