2016-05-13 38 views
0

我正在使用d3將onClick()事件添加到我的svg容器。d3 svg differentiate onclick

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」。 我該怎麼做?

回答

1

你可以通過使用preventDefault功能:

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

我要檢查日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");})