Html 单击通过SVG元素的事件（无边界框）

我有一个SVG（target）元素，它包含两个SVG（decedents）元素，这个容器SVG位于页面中的SVG（root）的深处。我看到的问题是，如果我在SVG（目标）上注册了一个事件，那么只有在您单击其中一个SVG（decedents）时才会触发该事件，就好像SVG（目标）没有边界框一样。除了用100%x 100%的透明矩形填充SVG（目标）之外，我的选项是什么？

为什么不使用不同的方法分配事件。将属性指定给元素。例如：-

假设下面是您的svg：-

<svg ... >

 <g id='container' data-action='selection'>
 <g id='child1' data-action='selection'>
</g>

 <g id='child2' data-action='selection'>
</g>


</g>

</svg>

---

问题是，即使我绑定在更高级别的元素上，g元素也是透明的。如果您上传一个小提琴（示例）或图片说明，说明您想要实现的目标，那就太好了。另外，jQuery不支持SVG，但我会很快发布jsBin。

document.addEventListener('mousedown',useraction,false);

function useraction(event){

if(event.target.hasAttribute('data-action')){
  var action=event.target.getAttribute('data-action');

   if(action==='selection'){
   //call your selection function to perform action.
   }
 }

}