[WASM] Touch events not working in Windows browsers

[k-okawa]

• axmol version: v2.11.x
• windows version: Windows11 25H2 26200.7623

Likely due to the impact of a recent Windows update, touch events are no longer responding in major Windows browsers (Edge, Chrome, and Firefox).
Even the official Wasm sample(Axmol tests) fails to respond to touch input, making it impossible to interact with the application.

This issue appears to be specific to Windows; touch input works correctly on Android, iOS, and macOS.

My game, which was built with v2.11.0 last year, supported touch interaction on Windows at the time. However, it can no longer be operated using touch input.

As a temporary workaround, I am avoiding this issue by adding the following script to the HTML:

      canvas: (function () {
        var canvas = document.getElementById('canvas');

        // As a default initial behavior, pop up an alert when webgl context is lost. To make your
        // application robust, you may want to override this behavior before shipping!
        // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
        canvas.addEventListener("webglcontextlost", function (e) { Module.ccall('axmol_webglcontextlost'); alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
        canvas.addEventListener("webglcontextrestored", function (e) { Module.ccall('axmol_webglcontextrestored'); e.preventDefault(); }, false);

        document.addEventListener("visibilitychange", () => { Module.ccall('axmol_hdoc_visibilitychange', document.hidden); });


        // Touch event workaround: Dispatch mouse events as touch events
        function simulateTouchFromMouse(mouseEvent, touchType) {
          var touch = new Touch({
            identifier: 0,
            target: canvas,
            clientX: mouseEvent.clientX,
            clientY: mouseEvent.clientY,
            screenX: mouseEvent.screenX,
            screenY: mouseEvent.screenY,
            pageX: mouseEvent.pageX,
            pageY: mouseEvent.pageY,
          });
          var touchEvent = new TouchEvent(touchType, {
            cancelable: true,
            bubbles: true,
            touches: touchType === 'touchend' ? [] : [touch],
            targetTouches: touchType === 'touchend' ? [] : [touch],
            changedTouches: [touch],
          });
          canvas.dispatchEvent(touchEvent);
        }

        var isMouseDown = false;
        canvas.addEventListener('mousedown', function (e) {
          isMouseDown = true;
          simulateTouchFromMouse(e, 'touchstart');
        }, { passive: false });
        canvas.addEventListener('mousemove', function (e) {
          if (isMouseDown) {
            simulateTouchFromMouse(e, 'touchmove');
          }
        }, { passive: false });
        canvas.addEventListener('mouseup', function (e) {
          isMouseDown = false;
          simulateTouchFromMouse(e, 'touchend');
        }, { passive: false });
        canvas.addEventListener('mouseleave', function (e) {
          if (isMouseDown) {
            isMouseDown = false;
            simulateTouchFromMouse(e, 'touchend');
          }
        }, { passive: false });

        return canvas;
      })(),

Thank you for maintaining this great engine. Let me know if you need any more information.

[halx99]

Thanks for your report, will check later

[halx99]

I can't reproduce the issue on my local machine, test case: 61: Touches of cpp-tests

[k-okawa]

Thank you for checking!

In my environment, the UI is unresponsive right from the start screen of the Axmol tests.
I tried switching to a different user account on the same PC, and it worked fine there.
It doesn't seem to be an issue with the Windows version, but rather some specific setting affecting it.

I'll look into this a bit more.

[k-okawa]

I may have identified a possible cause of this issue.

I ran the following code to check the environment:

console.log("maxTouchPoints", navigator.maxTouchPoints);

When maxTouchPoints was 0 or 1, touch events worked correctly and the UI could be operated without any issues.

However, on the PC account where the issue occurred, maxTouchPoints was 2.

I then checked the Windows system information on that PC and found the following:

Pen and touch: Touch support with 2 touch points

On PC accounts where this issue did not occur, touch input was not supported.

It is unclear why the system ended up with 2 touch points enabled, but I believe there are likely a certain number of users who may encounter this situation.

As an additional note, even on the same PC account, enabling “Toggle device toolbar” in the browser’s developer tools caused maxTouchPoints to become 1, and the application worked as expected.

[k-okawa]

Checked today and it’s working fine.
The cause is still unclear as the 2-point touch support hasn't changed.

[halx99]

@k-okawa Thanks for your report, please check does the PR #3056 fix this issue?

[k-okawa]

@halx99

Thank you for the fix!

I couldn't reproduce the bug on my environment anymore, so I checked it by overriding maxTouchPoints before init.
I confirmed that touch doesn't work in v2.11.2, but it works fine in the latest dev branch.