javascript - SVG 上的 JQuery 事件未触发

Question

我在事件方面遇到问题。我有一个 div，里面有一个 svg 区域。在该区域上，我想将一些节点放置在某些组中。当我单击空白区域时，我需要一种不同的行为；当我单击 svg 矩形时，我需要一种不同的行为。

问题是，只有我的 div contextmenu 事件正在触发。我的JS:

$(function() {

$('#mainBoard').on("click", function (ev) {
    ev.preventDefault();
    $('body').append("DivEventTiggered ");
    return false;
});

$("svg").find("g.node").find("rect").on("click", function (ev) {
    ev.preventDefault();
    $('body').append("SVGEventTriggered");
    return false;
})

$('#add-svg').click(function (ev) {
        d3.select("#SVGcanvas")
        .append("g")
        .attr("id", "id0")
        .attr("class", "node")
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 40)
        .attr("height", 40)
        .style("fill", "purple")
        .style("opacity", "0.1")
        .style("border", "1px black solid");
    return false;
})
})

CSS:

#mainBoard {
padding: 0;
margin: auto;
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid black;
}

#menu {
height: 37px;
}

还有我的 HTML 片段

<div id="mainBoard">
<svg id="SVGcanvas" style="height:inherit; width:inherit; display:block;"></svg>
<div id="menu">
    <button id="add-svg" class="btn btn-success" style="margin-right: 10px;">Add SVG</button>
</div>

这里可以看到只有Div事件被触发: JSFiddle

Answer 1

问题是您在 svg 矩形存在之前就将其绑定(bind)到了它们(通过单击添加 svg 按钮)。

最简单的解决方案是:

$('#add-svg').click(function (ev) {
        d3.select("#SVGcanvas")
        .append("g")
        .attr("id", "id0")
        .attr("class", "node")
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 40)
        .attr("height", 40)
        .style("fill", "purple")
        .style("opacity", "0.1")
        .style("border", "1px black solid");

         // now the g node exists
         $("svg").find("g.node").find("rect").on("click", function (ev) {
            ev.preventDefault();
            $('body').append("SVGEventTriggered");
            return false;
        })
    return false;
})