SVG元素和G中的StopPropagation()函数

Question

我创建了一个包含.on("click")行为的SVG元素，并附加了具有.on("click")的 g 元素，我认为可以使用 d3.event.stopPropagation() 来防止 g 元素点击事件触发 SVG 的点击事件。但实际上两个点击事件都会继续触发，所以我可能没有将 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");
}

- Elijah

Answer 1

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

通常，点击手势会引起mousedown，mouseup和click事件，按照这个顺序。

您可以保留子元素上的click事件处理程序并添加带有stopPropagation调用的mousedown事件处理程序，就可以达到您想要的效果。

这里是一个示例，演示了在类似情况下使用它的方法。

- Jason Davies

---

嗨，Jason，我仍然不清楚代码应该是什么样子的。我需要<svg>上的事件是mousedown事件，而<g>上的事件是click事件。我更新了网站，包括以下内容，但没有任何变化： .on('mousedown', function(){ d3.event.sourceEvent.stopPropagation(); }) - Elijah

你需要使用 d3.event.stopPropagation()。你的代码将无法工作，因为 d3.event.sourceEvent 是未定义的。我已经为你添加了一个示例。 - Jason Davies

我忘了提到我尝试过使用事件、事件源和事件目标，但都没有效果。我只是复制其他D3演示中使用的各种stopPropagation()术语。但是你的演示非常棒，正是我需要理解它的东西。 - Elijah

很好的链接，解释得非常清楚。 - Drenai