Question

尝试使用svg onClick来调用原型函数。

通常调用原型函数我会这样做。（functionName）但是当我把它放到.setAttribute(onclick, "this.(functionName)")时它不能识别原型函数。有没有人有这方面的经验？

如果上述情况不明确，那就是它的基本要点......

function myobject(svgShape) {
    this.svgshape.setAttribute(onclick, 'this.doSomething()');
}
myobject.prototype.doSomething = function() {
    alert("works");
}

Answer 1

可能会有所帮助的三件事：

1）首先，我认为你在myobject函数的顶部错过了这一行：

this.svgshape = svgshape;

我假设这只是发布问题的错误，并在下面插入。

2）通常当你使用Prototype（或任何现代库）时，你不使用字符串进行回调，而是使用 functions 。此外，您通常使用库的包装器为addEventListener / attachEvent（observe，在Prototype的情况下）而不是旧的DOM0属性事件分配处理程序。所以：

function myobject(svgShape) {
    this.svgshape = svgshape;
    $(this.svgshape).observe('click', this.doSomething); // STILL WRONG, see below
}
myobject.prototype.doSomething = function() {
    alert("works");
}

3）但是JavaScript没有方法（它实际上并不需要它们），它只有函数，所以上面不能确保this（<正确设置了em>调用的上下文。使用Prototype，您可以使用bind来设置上下文：

function myobject(svgShape) {
    this.svgshape = svgshape;
    $(this.svgshape).observe('click', this.doSomething.bind(this));
}
myobject.prototype.doSomething = function() {
    alert("works");
}

（或者你可以使用自己的封闭做到这一点。的好处bind是闭包是在一个非常良好的控制环境，因此不收了你不想让身边的事物不停。）

现在，我从来没有做过与原型任何SVG编程，所以如果observe出于某种原因不能正常工作，你可以尝试直接分配给onclick反映属性：

function myobject(svgShape) {
    this.svgshape = svgshape;
    this.svgshape.onclick = this.doSomething.bind(this);
}
myobject.prototype.doSomething = function() {
    alert("works");
}

我仍在使用bind，以便this具有正确的值。

我贫穷的小博客上的这些帖子提供了对上述内容的更多讨论：

Javascript Prototype函数和SVG setAttribute（onclick）

1 个答案: