如何将事件处理程序动态附加到 SVG 组？答案

【问题标题】：How do I dynamically attach event handlers to SVG groups?如何将事件处理程序动态附加到 SVG 组？
【发布时间】：2014-12-08 23:09:56
【问题描述】：

向 SVG 组（标签）添加事件处理程序会导致奇怪的行为。它似乎坏了。以下是相关代码：

var newelement = document.createElementNS("http://www.w3.org/2000/svg", 'use');
newelement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#Xprototype");
var newgroup = document.createElementNS("http://www.w3.org/2000/svg", 'g');
newgroup.appendChild(newelement);
newgroup.setAttribute("transform", "translate(100, 100)");
var svg = document.getElementById("thesvg");
newgroup.addEventListener("click", elementClick, false); //Click handler is set to the GROUP, not the element
svg.appendChild(newgroup);

这是小提琴：

http://jsfiddle.net/3bey8heu/2/

向其他对象添加事件处理程序没有问题 - 它似乎是动态创建的组所独有的。是的，组可以处理鼠标事件，如this fiddle 所示。

【问题讨论】：

可能是因为 X 是组内唯一可点击的东西。试着给它一个背景。

标签： javascript jquery events svg

【解决方案1】：

Only graphics elements can be the target of pointer-events such as click。如果将其设置在 <g> 等父元素上，则其所有图形子元素都可能成为目标，但 <g> 本身则不会。

【讨论】：