獲取元素在SVG元素內單擊

Question

我有兩個嵌套的<svg>元素，如下所示：

<svg id="main_svg">
    <svg data="business" id="something">
        <rect>
            // Code for rectangle
        </rect>
    </svg>
</svg>

如何獲取main_svg <svg>標記的main_svg ？

我用this.id嘗試了contextmenu事件處理程序，但是它總是返回main_svg ：

$("svg").contextmenu(function(e) {
    e.preventDefault();
    console.log(this.id);
});

如何才能做到這一點？ 有沒有更好的方法？ 我對以下兩個事件感到滿意： onclick或contextmenu 。

Answer 1

您可以使用jQuery函數$('svg').find("> svg")找到每一個直接的兒童為<svg>的的-元素<svg>元素。

$('svg').find("> svg").each(function() {
    var id = $(this).attr("id");
    console.log(id);
});

參見jsFiddle： https ://jsfiddle.net/kyjn6z87/