添加和删​​除指向构造函数表达式内部的函数声明的事件侦听器

Question

我在弄清楚如何以有效的方式组织这些表达式集时遇到问题。我的构造函数是游戏编辑器的组件。在此构造函数的内部，我有一个处理方法，当播放器单击调用moveObject表达式的文档上的SVG时。 move对象正确地移动了对象，似乎内部的onMouseMove函数声明正在按预期工作，但是我无法弄清楚如何删除这些侦听器。

我也尝试过在removes上绑定（this），但是那些没有用。在尝试弄乱函数表达式和声明之前，我想看看你们是否对如何更有效地编写此代码有任何想法。我觉得现在有点笨拙。

function Editor(game){
    this.active = null;

    this.moveObject = function(event) {
        var x = event.clientX; 
        var y = event.clientY;
        let element = document.elementFromPoint(x, y);
        if (element.classList.contains('editorMoveable')) {
            do {
                element = element.parentElement; 
                if (element.classList.contains('gameObject'))
                    break;
            } while(element.tagName != "body");
        }

        this.activeElement = element;
        var key = splitElementID(this.activeElement.id);
        this.active = this.game.objects[key.object][key.subObject];

        let shiftX = event.clientX - this.activeElement.getBoundingClientRect().left;
        let shiftY = event.clientY - this.activeElement.getBoundingClientRect().top;
        var globalTransform = this.game.calculateGlobals(this.active);

        var newPos = moveAt(event.pageX, event.pageY);
        this.active.Transform.position.x = newPos.newPosX;
        this.active.Transform.position.y = newPos.newPosY;
        this.activeElement.style.transform = 'translate(' + newPos.newPosX + 'rem, ' + newPos.newPosY + 'rem)';

        function moveAt(pageX, pageY) {
            var newPosX = ((pageX - shiftX)/remSize - globalTransform.position.x);
            var newPosY = ((pageY - shiftY)/remSize - globalTransform.position.y);
            var newRotX = (0);
            var newRotY = (0);
            var newSclX = (1);
            var newSclY = (1);
            return {"newPosX": newPosX, "newPosY": newPosY}
        }

        function onMouseMove(event) {
            var newPos = moveAt(event.pageX, event.pageY);
            this.active.Transform.position.x = newPos.newPosX;
            this.active.Transform.position.y = newPos.newPosY;
            this.activeElement.style.transform = 'translate(' + newPos.newPosX + 'rem, ' + newPos.newPosY + 'rem)';
        }

        function onMouseUp() {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            this.activeElement = null;
            this.active = null;
        }

        // Move the elem on mousemove
        document.addEventListener('mousemove', onMouseMove.bind(this));
        document.addEventListener('mouseup', onMouseUp.bind(this));
    };
};

结果如上面的问题所述。由于未删除事件（每次单击时都会堆栈），因此我得到“无法读取null属性”。

感谢所有的帮助！

Answer 1

问题在于HTTP/1.1 200 OK <<< Status finally 200 Server: nginx Date: Thu, 20 Jun 2019 02:36:04 GMT Content-Type: video/mp4 << content type correct Content-Length: 92894175 << length correct Connection: keep-alive与onMouseMove的功能不同。

您可以做的是将其分配给变量，然后在onMouseMove.bind(this)和addEventListener调用中使用该变量。

removeEventListener