2
我有一个包含一对SVG(decedents)元素的SVG(target)元素,这个容器SVG深处SVG(根)位于页面中。我看到的问题是,如果我在SVG(目标)上注册了一个事件,则只有当您点击SVG(死亡者)之一时,才会触发事件,就好像SVG(目标)没有边界框一样。除了用100%x 100%的透明矩形填充SVG(目标)以外,我的选择是什么?通过SVG元素传递的点击事件(无边框)
我有一个包含一对SVG(decedents)元素的SVG(target)元素,这个容器SVG深处SVG(根)位于页面中。我看到的问题是,如果我在SVG(目标)上注册了一个事件,则只有当您点击SVG(死亡者)之一时,才会触发事件,就好像SVG(目标)没有边界框一样。除了用100%x 100%的透明矩形填充SVG(目标)以外,我的选择是什么?通过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>
现在在代码中,对文件绑定事件。
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元素是透明的,即使我绑定在更高级别的元素上。 – QueueHammer
如果您上传小提琴(示例)或图片说明您想要实现的功能,那就太好了。 – RashFlash
另外它的问题与jQuery不支持SVG,但病不久后发布jsBin。 – QueueHammer