StopPropagation（），带有SVG元素和G

Question

我创建了一个具有.on("click")行为的SVG元素，并在g元素后附加了.on("click")，并认为我可以使用d3.event.stopPropagation()来阻止SVG click事件与g click事件一起触发。相反，两个事件都继续触发。因此，我必须将stopPropagatio n放在错误的位置。

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事件处理程序保留在子元素上，并通过mousedown调用添加stopPropagation事件处理程序，这应该可以实现您所追求的目标。

这里an example展示了在与您相似的情况下的用法。