removeEventListenerが効かない

Question

前提・実現したいこと

Three.jsを利用し、360度動画を複数再生するWebサイトを作成しています。
メインで再生している動画にカメラの位置を変更するEventListnerを付与し、動画を切り替えた際に付与したイベントをremoveEventListenerで削除したいのですが削除できません
調査すると引数が異なることにより起こっているのかと推測していますが解決策あればご教授いただきたいです。
また、Three.jsで360度動画再生は下記ページを参考にさせていただきました。
https://sterfield.co.jp/designer/three-js%E3%81%A7360%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E%E5%8B%95%E7%94%BB%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/

該当のソースコード

//イベントの振り分け
var EVENT = {};
if ('ontouchstart' in window) {
	EVENT.TOUCH_START = 'touchstart';
	EVENT.TOUCH_MOVE = 'touchmove';
	EVENT.TOUCH_END = 'touchend';
} else {
	EVENT.TOUCH_START = 'mousedown';
	EVENT.TOUCH_MOVE = 'mousemove';
	EVENT.TOUCH_END = 'mouseup';
}

var onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;

// 球体作成関数
function createThreeDimVideo(elem, index){
	var camera, scene, renderer, video, texture, container;

	init();
	tick();

	function init(){
	 ... 省略 ...
		// onDocumentMouseMoveでカメラの位置を変更するためeventとcameraを渡す
		if(index == 0){
			renderer.domElement.addEventListener( EVENT.TOUCH_START, onDocumentMouseDown.bind(renderer.domElement, camera), false );
		}
	 ... 省略 ...
	}
	function onWindowResize () {
	 ... 省略 ...
	}
	function tick() {
	 ... 省略 ...
	}
};

// 以下動画切り替え時に利用したいため関数として切り離す
function onDocumentMouseDown( camera, event ) {
	event.preventDefault();
	if(event.clientX) {
		onMouseDownMouseX = event.clientX;
		onMouseDownMouseY = event.clientY;
	} else if(event.touches) {
		onMouseDownMouseX = event.touches[0].clientX
		onMouseDownMouseY = event.touches[0].clientY;
	} else {
		onMouseDownMouseX = event.changedTouches[0].clientX
		onMouseDownMouseY = event.changedTouches[0].clientY
	}
	onMouseDownLon = lon;
	onMouseDownLat = lat;
	document.addEventListener( EVENT.TOUCH_MOVE, onDocumentMouseMove.bind(document, camera), false );
	document.addEventListener( EVENT.TOUCH_END, onDocumentMouseUp.bind(document, camera), false );
}
function onDocumentMouseMove( camera, event ) {
	event.preventDefault();
	if(event.clientX) {
		var touchClientX = event.clientX;
		var touchClientY = event.clientY;
	} else if(event.touches) {
		var touchClientX = event.touches[0].clientX
		var touchClientY = event.touches[0].clientY;
	} else {
		var touchClientX = event.changedTouches[0].clientX
		var touchClientY = event.changedTouches[0].clientY
	}
	lon = ( touchClientX - onMouseDownMouseX ) * -0.3 + onMouseDownLon;
	lat = ( touchClientY - onMouseDownMouseY ) * -0.3 + onMouseDownLat;

	lat = Math.max( - 85, Math.min( 85, lat ) );
	phi = THREE.Math.degToRad( 90 - lat );
	theta = THREE.Math.degToRad( lon );
	camera.position.x = 100 * Math.sin( phi ) * Math.cos( theta );
	camera.position.y = 100 * Math.cos( phi );
	camera.position.z = 100 * Math.sin( phi ) * Math.sin( theta );
	camera.lookAt( 0, 0, 0 );
}

// onDocumentMouseMoveが削除されない

function onDocumentMouseUp( camera, event ) {
	document.removeEventListener( EVENT.TOUCH_MOVE, onDocumentMouseMove.bind(document, camera), false );
	document.removeEventListener( EVENT.TOUCH_END, onDocumentMouseUp.bind(document, camera), false );
}

var elems = Array.from(document.getElementsByTagName('video'));
elems.forEach(function(video, index){
	createThreeDimVideo(video, index);
});

Answer 1

    document.addEventListener( EVENT.TOUCH_MOVE, onDocumentMouseMove.bind(document, camera), false );
    document.addEventListener( EVENT.TOUCH_END, onDocumentMouseUp.bind(document, camera), false );
    ...
    document.removeEventListener( EVENT.TOUCH_MOVE, onDocumentMouseMove.bind(document, camera), false );
    document.removeEventListener( EVENT.TOUCH_END, onDocumentMouseUp.bind(document, camera), false );

bind()は、毎回新しい関数を生成します。なので、同じ関数からbind()しても、addEventListener()とremoveEventListener()で異なる関数を指定していることになります。bind()の結果を変数に入れておくなどしてください。

Comments

[te_ff]

ありがとうございます！
実現できました！

var mouseMoveEvent;
...
document.addEventListener( EVENT.TOUCH_MOVE, mouseMoveEvent = onDocumentMouseMove.bind(document, camera), false );
...
document.removeEventListener( EVENT.TOUCH_MOVE, mouseMoveEvent, false );