D3.js中svg点击事件与内部circle点击事件重叠冲突的解决咨询

问题原因 #

点击圆形时，事件会按照冒泡顺序向上传播，先触发圆形绑定的点击事件将填充色设为红色，紧接着触发上层svg绑定的点击事件将填充色覆盖为绿色，因此看起来圆形的点击事件没有生效。

解决方案 #

只需要在圆形的点击事件回调中添加d3.event.stopPropagation()，阻止事件向上冒泡到svg元素即可，修改后的JS代码如下：

var svg = d3.select("#cv")
  .attr("height", 300)
  .attr("width", 300)
  .style("border", "1px solid red")
  .on("click", function(d) {
    circ.style("fill", "green")
  });

var circ = svg
  .append("circle")
  .attr("r", 100)
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("stroke", "black")
  .style("fill", "grey")
  .on("click", function(d) {
    // 阻止事件冒泡到父级svg
    d3.event.stopPropagation();
    circ.style("fill", "red")
  });

修改后点击圆形时，事件不会向上传递到svg，填充色会保持红色；点击svg空白区域时只会触发svg的点击事件，填充色变为绿色，完全匹配预期需求。

内容的提问来源于stack exchange，提问作者JK2018