禁止某些SVG子元素的鼠标交互

Question

这是一个带有圆圈的svg：

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

当我将鼠标悬停在circle时，为什么mouseover触发？ 我认为是因为其父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

如果要禁止指针交互，请在该元素上设置指针事件 =“ none”。

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

Answer 3

容器元素不会在SVG中触发鼠标事件。 仅当将鼠标悬停在该事件包含的任何子图形元素上时，该事件才会被触发。