fix touch event when target - is not an element (#6881)

* fix touch event when target - is not an element * PR comments * linter # Conflicts: # src/framework/input/element-input.js
playcanvas · Aug 21, 2024 · 591831c · 591831c
1 parent b15e751
commit 591831c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 32 deletions.
diff --git a/src/framework/input/element-input.js b/src/framework/input/element-input.js
@@ -3,6 +3,7 @@ import { Vec3 } from '../../core/math/vec3.js';
 import { Vec4 } from '../../core/math/vec4.js';
 import { Ray } from '../../core/shape/ray.js';
 import { Mouse } from '../../platform/input/mouse.js';
+import { getTouchTargetCoords } from '../../platform/input/touch-event.js';
 import { getApplication } from '../globals.js';
 
 /**
@@ -582,7 +583,7 @@ class ElementInput {
                     continue;
                 }
 
-                const coords = this._calcTouchCoords(event.changedTouches[j]);
+                const coords = getTouchTargetCoords(event.changedTouches[j]);
 
                 const element = this._getTargetElementByCoords(camera, coords.x, coords.y);
                 if (element) {
@@ -655,7 +656,7 @@ class ElementInput {
 
             // check if touch was released over previously touch
             // element in order to fire click event
-            const coords = this._calcTouchCoords(touch);
+            const coords = getTouchTargetCoords(touch);
 
             for (let c = cameras.length - 1; c >= 0; c--) {
                 const hovered = this._getTargetElementByCoords(cameras[c], coords.x, coords.y);
@@ -688,7 +689,7 @@ class ElementInput {
             const oldTouchInfo = this._touchedElements[touch.identifier];
 
             if (oldTouchInfo) {
-                const coords = this._calcTouchCoords(touch);
+                const coords = getTouchTargetCoords(touch);
 
                 // Fire touchleave if we've left the previously touched element
                 if ((!newTouchInfo || newTouchInfo.element !== oldTouchInfo.element) && !this._touchesForWhichTouchLeaveHasFired[touch.identifier]) {
@@ -918,28 +919,6 @@ class ElementInput {
         targetY = (event.clientY - top);
     }
 
-    _calcTouchCoords(touch) {
-        let totalOffsetX = 0;
-        let totalOffsetY = 0;
-        let target = touch.target;
-        while (!(target instanceof HTMLElement)) {
-            target = target.parentNode;
-        }
-        let currentElement = target;
-
-        do {
-            totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
-            totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
-            currentElement = currentElement.offsetParent;
-        } while (currentElement);
-
-        // calculate coords and scale them to the graphicsDevice size
-        return {
-            x: (touch.pageX - totalOffsetX),
-            y: (touch.pageY - totalOffsetY)
-        };
-    }
-
     _sortElements(a, b) {
         const layerOrder = this.app.scene.layers.sortTransparentLayers(a.layers, b.layers);
         if (layerOrder !== 0) return layerOrder;

diff --git a/src/platform/input/touch-event.js b/src/platform/input/touch-event.js
@@ -15,16 +15,16 @@ function getTouchTargetCoords(touch) {
     let totalOffsetX = 0;
     let totalOffsetY = 0;
     let target = touch.target;
-    while (!(target instanceof HTMLElement)) {
+
+    while (!(target instanceof HTMLElement) && target) {
         target = target.parentNode;
     }
-    let currentElement = target;
 
-    do {
-        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
-        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
-        currentElement = currentElement.offsetParent;
-    } while (currentElement);
+    while (target) {
+        totalOffsetX += target.offsetLeft - target.scrollLeft;
+        totalOffsetY += target.offsetTop - target.scrollTop;
+        target = target.offsetParent;
+    }
 
     return {
         x: touch.pageX - totalOffsetX,