通過SVG元素傳遞的點擊事件（無邊框）

Question

我有一個包含一對SVG（decedents）元素的SVG（target）元素，這個容器SVG深處SVG（根）位於頁面中。我看到的問題是，如果我在SVG（目標）上註冊了一個事件，則只有當您點擊SVG（死亡者）之一時，纔會觸發事件，就好像SVG（目標）沒有邊界框一樣。除了用100％x 100％的透明矩形填充SVG（目標）以外，我的選擇是什麼？

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

}