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

Question

向 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);

这是 fiddle :

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

我在向其他对象添加事件处理程序时没有问题 - 它似乎对于动态创建的组来说是唯一的。是的，组可以处理鼠标事件，如 this 中所示。 fiddle 。

Answer 1

Only graphics elements can be the target of pointer-events such as click 。如果您将其设置在父级上，例如 <g>元素，那么它的所有图形子元素都成为可能的目标，但 <g> 除外本身。