如何動態地將事件處理程序附加到SVG組？

Question

將事件處理程序添加到SVG組（<g>標簽）會導致奇怪的行為。 它似乎壞了。 以下是相關代碼：

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/

我將事件處理程序添加到其他對象沒有問題-動態創建的組似乎是唯一的。 是的，小組可以處理鼠標事件，如本小提琴所示。

Answer 1

只有圖形元素才能成為指針事件（如click）的目標 。 如果將其設置在諸如<g>元素之類的父元素上，則其所有圖形子元素都可能成為目標，但<g>本身不可以。