ингибирующие взаимодействия мыши для некоторых дочерних элементов SVG

Question

Вот СВГ с круга нарисованы на нем:

svg = d3.select("body").append("svg") 
    .on("mouseover", function() { console.log("callback");}); 

svg.append("circle") 
    .attr("cx", 50) 
    .attr("cy",50) 
    .attr("r",20) 
    .attr("fill","red"); 

Почему mouseover огонь, когда я мыши над circle? Я предполагаю, что его дочерний элемент его родителя svg?

Но я хотел бы заблокировать это действие. Как я могу это сделать?

Answer 1

Аргументы функции mouseover, похоже, не проходят в этом случае, поэтому я придумал это решение.

svg = d3.select("body").append("svg") 
    .on("mouseover", function() { 
     var event = window.event; 
     if (event.target.nodeName === "svg") { 
      console.log("callback");  
     } 
    }); 

svg.append("circle") 
    .attr("cx", 50) 
    .attr("cy",50) 
    .attr("r",20) 
    .attr("fill","red"); 

Answer 2

Если вы хотите, чтобы ингибировать указатель взаимодействия не установлен pointer-events = «нет» на этот элемент.

.attr("pointer-events","none") 

Answer 3

Контейнерные элементы не вызывают события мыши в SVG. Событие запускается только при наведении указателя мыши на любой из дочерних графических элементов, которые он содержит.