d3 svg differentiate onclick

Question

我正在使用d3将onClick（）事件添加到我的svg容器。

var svg = d3.select("svg").on("click",()=>{console.log("svg");}); 

我也有一个onclick事件为svg中的嵌入行对象;

var line =d3.select("svg").append("line") 
       .attr("x1",10) 
       .attr("y1",10) 
       .attr("x2",100) 
       .attr("y2",100) 
       .attr("stroke-width",6) 
       .attr("stroke","black") 
       .on("click"()=>{console.log("line");}) 

我想这两个事件是独立的意义，每当我点击 行我只得到输出“行”，而不是“线”和“SVG”。 我该怎么做？

Answer 1

你可以通过使用preventDefault功能：

.on("click"()=>{ 
    d3.event.preventDefault(); 
    console.log("line"); 
}) 

Answer 2

我要检查日SVG如果有任何阻止事件

var svg = d3.select("svg").on("click",()=>{ 
           if(d3.event.defaultPrevented) 
           console.log("svg");}); 

就行了对象，然后我可以使用的preventDefault（ ）

var line =d3.select("svg").append("line") 
      .attr("x1",10) 
      .attr("y1",10) 
      .attr("x2",100) 
      .attr("y2",100) 
      .attr("stroke-width",6) 
      .attr("stroke","black") 
      .on("click"()=>{ 
        d3.event.preventDefault(); 
        console.log("line");})