Controls: Make use of setPointerCapture(). (#22118)

examples/jsm/controls/OrbitControls.js

@@ -294,8 +294,8 @@ class OrbitControls extends EventDispatcher {
 			scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
 			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
 
-			scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
-			scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
 
 
 			if ( scope._domElementKeyEvents !== null ) {
@@ -803,8 +803,10 @@ class OrbitControls extends EventDispatcher {
 
 			if ( pointers.length === 0 ) {
 
-				scope.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
-				scope.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
+				scope.domElement.setPointerCapture( event.pointerId );
+
+				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+				scope.domElement.addEventListener( 'pointerup', onPointerUp );
 
 			}
 
@@ -860,8 +862,10 @@ class OrbitControls extends EventDispatcher {
 
 			if ( pointers.length === 0 ) {
 
-				scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
-				scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+				scope.domElement.releasePointerCapture( event.pointerId );
+
+				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
 
 			}
 

examples/jsm/controls/TrackballControls.js

@@ -412,8 +412,10 @@ class TrackballControls extends EventDispatcher {
 
 			if ( _pointers.length === 0 ) {
 
-				scope.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
-				scope.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
+				scope.domElement.setPointerCapture( event.pointerId );
+
+				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+				scope.domElement.addEventListener( 'pointerup', onPointerUp );
 
 			}
 
@@ -469,8 +471,10 @@ class TrackballControls extends EventDispatcher {
 
 			if ( _pointers.length === 0 ) {
 
-				scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
-				scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+				scope.domElement.releasePointerCapture( event.pointerId );
+
+				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
 
 			}
 
@@ -563,9 +567,6 @@ class TrackballControls extends EventDispatcher {
 
 			}
 
-			scope.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
-			scope.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
-
 			scope.dispatchEvent( _startEvent );
 
 		}
@@ -595,9 +596,6 @@ class TrackballControls extends EventDispatcher {
 
 			_state = STATE.NONE;
 
-			scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
-			scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
-
 			scope.dispatchEvent( _endEvent );
 
 		}
@@ -780,6 +778,9 @@ class TrackballControls extends EventDispatcher {
 			scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
 			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
 
+			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
 			window.removeEventListener( 'keydown', keydown );
 			window.removeEventListener( 'keyup', keyup );
 

examples/jsm/controls/TransformControls.js

@@ -172,7 +172,7 @@ class TransformControls extends Object3D {
 
 		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
 		this.domElement.addEventListener( 'pointermove', this._onPointerHover );
-		this.domElement.ownerDocument.addEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
 
 	}
 
@@ -553,8 +553,8 @@ class TransformControls extends Object3D {
 
 		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
 		this.domElement.removeEventListener( 'pointermove', this._onPointerHover );
-		this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
 
 		this.traverse( function ( child ) {
 
@@ -691,7 +691,9 @@ function onPointerDown( event ) {
 
 	if ( ! this.enabled ) return;
 
-	this.domElement.ownerDocument.addEventListener( 'pointermove', this._onPointerMove );
+	this.domElement.setPointerCapture( event.pointerId );
+
+	this.domElement.addEventListener( 'pointermove', this._onPointerMove );
 
 	this.pointerHover( this._getPointer( event ) );
 	this.pointerDown( this._getPointer( event ) );
@@ -710,7 +712,9 @@ function onPointerUp( event ) {
 
 	if ( ! this.enabled ) return;
 
-	this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+	this.domElement.releasePointerCapture( event.pointerId );
+
+	this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
 
 	this.pointerUp( this._getPointer( event ) );