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

【问题标题】：Click events passing though SVG element (no bounding box)单击通过 SVG 元素的事件（无边界框）
【发布时间】：2013-07-13 07:08:11
【问题描述】：

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

【问题讨论】：

标签： html svg

【解决方案1】：

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

让我们说下面是你的 svg:-

<svg ... >

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

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


</g>

</svg>

现在在代码中，在文档上绑定事件。

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.
   }
 }

}

【讨论】：

问题是 g 元素是透明的，即使我绑定到更高级别的元素。
如果你上传一个小提琴（一个例子）或你想要达到的目标的图片说明会很好。
这也是 jQuery 不支持 SVG 但很快就会发布 jsBin 的问题。