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事件处理程序。

下面是一个例子，演示了它在与您类似的情况下的使用。