javascript onclick和方法

我对JS使用SVG.JS框架，我想为onclick事件添加方法，对于selectColor元素。javascript onclick和方法

changeCircleColor: function() { 
    this.circleColor = prompt("choose color for your circle"); 
}, 
view: function() { 
    var view = SVG('viewCircle').size(300, 300).style({ 
    background: "black" 
    }); 

    var circle = view.circle(280).attr({ 
    fill: this.circleColor, 
    cx: "150", 
    cy: "150" 
    }); 
    var selectColor = view.rect(30, 30).attr({ 
    fill: "white", 
    x: "270", 
    y: "270", 
    stroke: "black", 
    onclick: "this.changeCircleColor()" 
    }) 
},

但脚本无法找到它。

CircleEditor.html:1 Uncaught TypeError: this.changeCircleColor is not a function at SVGRectElement.onclick (CircleEditor.html:1)

来源

2017-05-29 tymtym

因为'this'点到窗口，但不是对象。如果您将这个对象分配给'window'，因为你可以通过'onclick'属性来调用它。 –

UPDATE

您的问题开始与你传递函数处理器到您的SVG元素的方式。

您使用attr（）方法中设置的字符串。

如果你使用一个字符串，你可以做的事情非常有限。对于小例子或者只传递一小段代码，通常是整个函数，这都可以。

当然，这个函数应该是独立的，可以自我执行的，不需要任何外部依赖。

但更多的东西，你应该避免ATTR（）和使用建议适当的方法来绑定在svg.js事件：

element.on('click', function() { 
    // your code here. 
});

你可以找到在文档页面的细节：http://svgjs.com/events/

而现在关于这个内容，即改变时点击事件被触发，所以你要注意有关这部分代码。

正确的方法设置处理如下：

element.on('click', this.changeCircleColor);

不像一个字符串，而是参考函数（实际上是函数体）。

所以你要将当前对象的函数作为svg元素的事件处理函数。

如果您使用的是事件处理函数内部当前的对象，你应该甚至功能绑定到你的对象：

element.on('click', this.changeCircleColor.bind(this));

来源

2017-05-29 16:17:32

他把它作为字符串传递，但不作为事件处理程序，所以我认为它不会工作.. –

你能解释更多吗？我认为我的回答是一样的。 –

属性'onClick'获取字符串''this.changeCircleColor（）“'所以你可以将它绑定到什么都没有，事件处理程序获取一个事件，以便你可以将它绑定到对象。 –

javascript onclick和方法

回答

相关问题