赋予所有圆形元素 onclick 行为答案

【问题标题】：Give to all circle element onclick beahviour赋予所有圆形元素 onclick 行为
【发布时间】：2013-10-22 01:56:43
【问题描述】：

我必须创建一个函数来获取所有圆形元素并使其可点击。使用我的代码，我只能单击创建的最后一个节点，但我不明白为什么。你能帮我吗？我使用 d3 库，这是我的代码：

var allCircles = vis.selectAll('circle');

allCircles.on('click', function(){
    /* make the same stuff depending from the circle clicked */
});

如果你需要更多的解释，问我。

非常感谢你帮助我！`

【问题讨论】：

只是为了确定，你检查过allCircles实际上引用了多个元素吗？
allCircles 是一个只有一个元素的对象，即创建的所有圆的数组

标签： javascript jquery svg d3.js onclick

【解决方案1】：

最好在圆的（父）容器元素上添加事件侦听器。这意味着您有这样一个元素，例如 <g>，您可以在其中添加侦听器。

var circleContainer = /* find your g element that contains the circles here */;

circleContainer.on('click', function(){
    // d3.event.target is the clicked circle
    d3.select(d3.event.target).attr("fill", "blue");
});

如果您更熟悉 jQuery，则该概念在此处称为 'delegated events'。

【讨论】：

【解决方案2】：

我不使用 d3 库，我从未听说过它，但我可以不使用它

var circles=document.getElementsByTagName('circle');
function onclik() {
  //do stuff
}
for(var i=0;i<circles.length;i++){
  circles[i].setAttribute("onclick","onclik()")
}

希望对你有帮助！

【讨论】：

此代码旨在放入 SVG 文件中。如果您希望它位于 HTML 文件中，请将“document”替换为包含 SVGDocument 对象的变量名