1

从特定画布内部单击鼠标后，是否有选择 HTML5 画布的特定实例化对象（“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);
}

然后在一个原型函数中我有......

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

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

4

2 回答 2

1

问题是您设置 onclick 处理程序的方式：

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

添加事件侦听器时，您会在内存中传递处理程序的引用。该函数的上下文（this指针）是无界的。因此，您的情况下的this指针将是画布元素。这就是您遇到以下错误的原因：

对象 #< HTMLCanvasElement > 没有方法 'of'

要解决此问题，您可以使用 Javascript 1.8.5 中引入的绑定函数来绑定上下文。（Function.prototype.bind 参考）

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

见演示。

于 2013-06-10T14:26:15.270 回答
0

只是一个建议，但请尝试将 of() 的定义移到 click() 之前。函数的顺序在 JS 中并不总是很重要，但我认为它可能适用于原型。我可能是错的（我没有检查过），但只需要一点时间来测试。

于 2013-06-09T18:40:51.433 回答