javascript - 添加和删​​除指向构造函数表达式中的函数声明的事件监听器

Question

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

我也试过在删除时使用 bind(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

问题是 onMouseMove 与 onMouseMove.bind(this) 不是同一个函数。

您可以将其分配给一个变量，然后在 addEventListener 和 removeEventListener 调用中使用该变量。

    let thisOnMouseMove = onMouseMove.bind(this);
    let thisOnMouseUp = onMouseUp.bind(this);

    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', thisOnMouseMove);
        document.removeEventListener('mouseup', thisOnMouseUp);
        this.activeElement = null;
        this.active = null;
    }

    // Move the elem on mousemove
    document.addEventListener('mousemove', thisOnMouseMove);
    document.addEventListener('mouseup', thisOnMouseUp);