docs: Offscreen Canvas fix touch pick and 2 fingers interactions (#29983)

* docs: Offscreen Canvas fix touch pick and 2 fingers interactions

* Update offscreencanvas-w-orbitcontrols.html

---------

Co-authored-by: Michael Herzog <[email protected]>

Author: Arecsu

manual/en/offscreencanvas.html

@@ -815,6 +815,7 @@ <h1>OffscreenCanvas</h1>
   'pointerType',
   'clientX',
   'clientY',
+  'pointerId',
   'pageX',
   'pageY',
 ]);
@@ -853,13 +854,19 @@ <h1>OffscreenCanvas</h1>
 }
 
 function touchEventHandler(event, sendFn) {
+  // preventDefault() fixes mousemove, mouseup and mousedown 
+  // firing when doing a simple touchup touchdown
+  // Happens only at offscreen canvas
+  event.preventDefault(); 
   const touches = [];
   const data = {type: event.type, touches};
   for (let i = 0; i &lt; event.touches.length; ++i) {
     const touch = event.touches[i];
     touches.push({
       pageX: touch.pageX,
       pageY: touch.pageY,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
     });
   }
   sendFn(data);

manual/examples/offscreencanvas-w-orbitcontrols.html

@@ -34,6 +34,7 @@
 	'pointerType',
 	'clientX',
 	'clientY',
+	'pointerId',
 	'pageX',
 	'pageY',
 ] );
@@ -84,7 +85,11 @@
 }
 
 function touchEventHandler( event, sendFn ) {
-
+	
+	// preventDefault() fixes mousemove, mouseup and mousedown 
+	// firing at touch events when doing a simple touchup touchdown
+	// Happens only at offscreen canvas
+	event.preventDefault(); 
 	const touches = [];
 	const data = { type: event.type, touches };
 	for ( let i = 0; i < event.touches.length; ++ i ) {
@@ -93,6 +98,8 @@
 		touches.push( {
 			pageX: touch.pageX,
 			pageY: touch.pageY,
+			clientX: touch.clientX,
+			clientY: touch.clientY,
 		} );
 
 	}

manual/ja/offscreencanvas.html

@@ -767,6 +767,7 @@ <h1>のOffscreenCanvas</h1>
   'pointerType',
   'clientX',
   'clientY',
+  'pointerId',
   'pageX',
   'pageY',
 ]);
@@ -805,13 +806,19 @@ <h1>のOffscreenCanvas</h1>
 }
 
 function touchEventHandler(event, sendFn) {
+  // preventDefault() fixes mousemove, mouseup and mousedown 
+  // firing when doing a simple touchup touchdown
+  // Happens only at offscreen canvas
+  event.preventDefault(); 
   const touches = [];
   const data = {type: event.type, touches};
   for (let i = 0; i &lt; event.touches.length; ++i) {
     const touch = event.touches[i];
     touches.push({
       pageX: touch.pageX,
       pageY: touch.pageY,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
     });
   }
   sendFn(data);

manual/ko/offscreencanvas.html

@@ -717,6 +717,7 @@ <h1>OffscreenCanvas</h1>
   'pointerType',
   'clientX',
   'clientY',
+  'pointerId',
   'pageX',
   'pageY',
 ]);
@@ -755,13 +756,19 @@ <h1>OffscreenCanvas</h1>
 }
 
 function touchEventHandler(event, sendFn) {
+  // preventDefault() fixes mousemove, mouseup and mousedown 
+  // firing when doing a simple touchup touchdown
+  // Happens only at offscreen canvas
+  event.preventDefault(); 
   const touches = [];
   const data = { type: event.type, touches };
   for (let i = 0; i &lt; event.touches.length; ++i) {
     const touch = event.touches[i];
     touches.push({
       pageX: touch.pageX,
       pageY: touch.pageY,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
     });
   }
   sendFn(data);

manual/ru/offscreencanvas.html

@@ -748,6 +748,7 @@ <h1>OffscreenCanvas</h1>
   'pointerType',
   'clientX',
   'clientY',
+  'pointerId',
   'pageX',
   'pageY',
 ]);
@@ -786,13 +787,19 @@ <h1>OffscreenCanvas</h1>
 }
 
 function touchEventHandler(event, sendFn) {
+  // preventDefault() fixes mousemove, mouseup and mousedown 
+  // firing when doing a simple touchup touchdown
+  // Happens only at offscreen canvas
+  event.preventDefault(); 
   const touches = [];
   const data = {type: event.type, touches};
   for (let i = 0; i &lt; event.touches.length; ++i) {
     const touch = event.touches[i];
     touches.push({
       pageX: touch.pageX,
       pageY: touch.pageY,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
     });
   }
   sendFn(data);