Javascript Mouseup和mousemove事件在外部模块中使用时失败

我正在处理一个three.js项目，该项目在对象（在本例中是粒子云）上实现一些相当标准的轨道控制

当我在我的根类中使用这个逻辑时（即使用所有的三个.js代码），它工作得非常好。然而，我想做的是将这个逻辑抽象到一个外部类中，这样它就不会出现了

执行此操作时，不会触发我的

mousemove

和

mouseup

事件。然而，触摸事件都能完美发射，轨道也能按预期工作

我尝试过在调用中使用

preventDefault（）

，但似乎没有多大区别。我也尝试过用“窗口”代替“文档”，因为我们现在在一个模块中，但这似乎也不起作用

我错过了什么？该模块如下所示：

var orbitElement;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var Controls = {

    enableOrbiting: function(target) {
        orbitElement = target;
        document.addEventListener( 'mousedown', this.onDocumentMouseDown, false );
        document.addEventListener( 'touchstart', this.onDocumentTouchStart, false );
        document.addEventListener( 'touchmove', this.onDocumentTouchMove, false );
    },

    onDocumentMouseDown: function( event ) {
        document.addEventListener( 'mousemove', this.onDocumentMouseMove, false );
        document.addEventListener( 'mouseup', this.onDocumentMouseUp, false );
        document.addEventListener( 'mouseout', this.onDocumentMouseOut, false );
        mouseXOnMouseDown = event.clientX - windowHalfX;
        targetRotationOnMouseDown = targetRotation;
    },

    onDocumentMouseMove: function( event ) {
        mouseX = event.clientX - windowHalfX;
        targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
    },

    onDocumentMouseUp: function( event ) {
        document.removeEventListener( 'mousemove', this.onDocumentMouseMove, false );
        document.removeEventListener( 'mouseup', this.onDocumentMouseUp, false );
        document.removeEventListener( 'mouseout', this.onDocumentMouseOut, false );
    },

    onDocumentMouseOut:function( event ) {
        document.removeEventListener( 'mousemove', this.onDocumentMouseMove, false );
        document.removeEventListener( 'mouseup', this.onDocumentMouseUp, false );
        document.removeEventListener( 'mouseout', this.onDocumentMouseOut, false );
    },

    onDocumentTouchStart: function( event ) {
        if ( event.touches.length == 1 ) {
            event.preventDefault();
            mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
            targetRotationOnMouseDown = targetRotation;
        }
    },

    onDocumentTouchMove: function( event ) {
            if ( event.touches.length == 1 ) {
            event.preventDefault();
            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
        }
    },

    updateOrbit: function() {
        orbitElement.rotation.y  += ( targetRotation - orbitElement.rotation.y ) * 0.04;
    }
}

module.exports = Controls;

---

这不是你想象的那样

调用
controls.enableOrbiting（）
时，在
enableOrbiting
内部，
此
与
控件
相同。但是当您将
this.onDocumentMouseDown
注册为事件处理程序时，
this
内部
onDocumentMouseDown
等于事件发射器，即
文档
，而不是
控件

编辑：分配后绑定到
控件。

您可以将每个函数绑定到
控件
，如下所示：

var Controls = {}
Controls.onDocumentMouseDown = function (event) {
 ...
}.bind(Controls);

这样，无论方法调用中使用了什么
This
，This
始终是
控件。
啊，很有趣。我尝试使用bind（），但在这样做的过程中，我注意到我的函数ref可以更显式，因为这实际上是一个静态助手类：
document.addEventListener（'mousedown'，Controls.onDocumentMouseDown，false）这种方法有什么缺点吗？绝对没有缺点。这本质上是一种常见的
var self=This
形式，它将
This
保存在函数的闭包中。当然，在这种情况下，必须注意在任何地方都一致使用
self
。酷。这两种方法都是有效的，现在效果很好。谢谢