Question

我正在使用Canvas for Windows 10开发nodeJS游戏。所以我有一个带画布的绘制按钮。为了使按钮工作，我有一个 EventListener在整个canvas元素上并检查当前客户端鼠标位置。

E.g

var obj = this;
canvas.addEventListener("click", function (e) {    // Handle Click on Canvas
   obj.clickEvent(e);
});

当我想删除按钮时，我拨打this.del()

del() {
   this.display = false;
   var obj = this;
   canvas.removeEventListener("click", function (e) {obj.clickEvent(e);});
   delete this;
   notification(2, "deletet" + this.text);
}

我在EventListener中使用obj couse this将无效。

obj.clickEvent(e)只是将鼠标位置的坐标与按钮的坐标进行比较。这很好。

任何有关此工作的建议或想法？ 我尝试了一些解决方法但到目前为止无法处理。

首先尝试：

class Button {
    constructor(container, func, x, y, w, h, bg_color = "#F18F26", text, font_size = 16, font_color = "#FFF", display = true) {
        ... // store parameters in this
        var obj = this;
        this.eventListener = canvas.addEventListener("click", function (e) {            // Handle Click on Canvas
            obj.clickEvent(e);
        });
        if (container !== false)
            container.addCtx(this);
    }

    clickEvent(e) {
        if ((e.clientX >= this.x - (this.w / 2)) && (e.clientX <= this.x + (this.w / 2)) && (e.clientY >= this.y - (this.h / 2)) && (e.clientY <= this.y + (this.h / 2))) {

            //notification(1, "Glückwunsch");
            _start.hide();
            _game_over.hide();
            switch (this.func) {
                ... // fires function
            }
        }
        this.del();
    }

    draw() {
        ... // draws the button
    }

    del() {
        this.display = false;
        var handler = this.eventListener;
        canvas.removeEventListener("click", handler);
        delete this;
        notification(2, "deleted" + this.text);
    }
}

Answer 1

修改

在你的构造函数中：

this.eventListener = this.clickEvent.bind(this); canvas.addEventListener('click',this.eventListener);

在del：
中
canvas.removeEventListener('click',this.eventListener); this.eventListener = null;

此外，在delete this方法中执行del无用，实例无法自行删除。您所能做的就是使实例符合垃圾收集的条件，确保没有其他内容可以保存对实例的引用。

<强> ORIGINAL

您需要保留对处理程序的引用：

var obj = this; var handler = obj.clickEvent.bind(obj); canvas.addEventListener('click',handler);

......以及之后的

canvas.removeEventListener('click',handler);

检查MDN以查找removeEventListener文档

Answer 2

您正在删除其他功能，这与您实际添加的侦听器无关。

您需要将实际的原始侦听器存储在某个变量中，以便以后可以将其删除。

Answer 3

您必须删除相同的侦听器对象，在本例中为相同的函数。

window.addEventListener('click', windowClickEvent);

function windowClickEvent(e) {
    // ...
}

此处windowClickEvent函数绑定到click事件。要删除侦听器，您必须通过与绑定的函数相同的函数。

window.removeEventListener('click', windowClickEvent);

如何删除EventListener？

3 个答案: