javascript - HTML5 Canvas 事件监听器和 JavaScript - addEventListener ("click")

Question

从特定 Canvas 内单击鼠标后，是否可以选择 HTML5 Canvas 的特定实例化对象(“t​​his”指针)？请记住，我展示的“Canvas”方法是我编写的一个非标准函数。

function Canvas(element) {
    this.canvas = document.createElement("canvas");
    this.context = this.canvas.getContext('2d');
    this.canvas.id = "display";
    var style = {"width" : "500",
                "height" : "500"};
    for(var index in style) {
        this.canvas[index] = style[index];
    }
    element == undefined ? document.body.appendChild(this.canvas) : element.appendChild(this.canvas);
    this.canvas.addEventListener("click", this.click, false);
}

然后在原型(prototype)函数中我...

Canvas.prototype.click = function(e) {
        this.mouse = [e.clientX, e.clientY];
        return this.of(this.mouse);
    }

错误:this.of(this.mouse) 不存在，但是我的代码中有这个函数的原型(prototype)(稍后)。

Answer 1

问题在于您设置 onclick 处理程序的方式:

this.canvas.addEventListener("click", this.click, false);
                                      ^^^^^^^^^^

添加事件监听器时，您将传递内存中处理程序的引用。该函数的上下文(this 指针)不受限制。因此，您的情况下的 this 指针将是 Canvas 元素。这就是您收到以下错误的原因:

Object #< HTMLCanvasElement > has no method 'of'

要解决这个问题，您可以使用Javascript 1.8.5中引入的bind函数来绑定(bind)上下文。 (Function.prototype.bind reference)

this.canvas.addEventListener("click", this.click.bind(this), false);

参见DEMO .