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