D3.js 带SVG元素和G的StopPropagation（）

我创建了一个带有

.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");
}

---

您似乎混淆了

单击

和

鼠标向下

事件。调用

stopPropagation

一次只会阻止单个事件的传播，这些事件是独立的

通常，单击手势将按顺序导致

mousedown

、

mouseup

和

click

事件

您可以保留子元素上的

单击

事件处理程序，并使用

stopPropagation

调用添加一个

mousedown

事件处理程序，这应该可以实现您的目标

---

这里演示了它在与您类似的情况下的使用。

嗨，Jason，我仍然不清楚代码的外观。我需要上的事件成为mousedown事件，我需要上的事件成为click事件。我更新了站点以包含以下内容，但没有任何更改：。在（'mousedown'，function（）{d3.event.sourceEvent.stopPropagation（）；}）上，您需要使用

d3.event.stopPropagation（）

。您的代码将无法工作，因为未定义

d3.event.sourceEvent

。我现在也为您添加了一个示例。我忘了提到我尝试了event、event.source和event.target，但没有效果。我只是在复制其他D3演示中使用的各种stopPropagation（）术语。但是你的演示很棒，这正是我需要理解的。很棒的链接，完美地解释了它