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