d3.js - StopPropagation() 与 SVG 元素和 G

Question

我创建了一个具有 .on("click") 行为的 SVG 元素，并附加了具有 .on("click") 的 g 元素，并认为我可以使用d3.event.stopPropagation() 以防止 SVG 单击事件与 g 单击事件一起触发。相反，这两个事件都继续发生。所以我一定把 stopPropagation 放在了错误的地方。

svg = d3.select("#viz").append("svg:svg")
    .attr("width", 800)
    .attr("height", 800)
    .on("mousedown", mousedown);

sites = svg.selectAll("g.sites")
    .data(json.features)
    .enter()
    .append("svg:g")
    .on("click", siteClick)
    ;

sites.append("svg:circle")                
    .attr('r', 5)
    .attr("class", "sites")
    ;

function mousedown() {
    console.log("mouseDown");
}

function siteClick(d, i) {
    d3.event.stopPropagation();
    console.log("siteClick");
}

Answer 1

您似乎混淆了 click 和 mousedown 事件。调用 stopPropagation 一次只会阻止单个事件的传播，并且这些是单独的事件。

通常，点击手势会按顺序引发 mousedown、mouseup 和 click 事件。

您可以将 click 事件处理程序保留在子元素上，并通过调用 stopPropagation 添加一个 mousedown 事件处理程序，这样应该可以实现你在追求什么。

这里是an example在与您类似的情况下展示其用途。