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

当我将鼠标放在mouseover上时，为什么circle会被触发？我假设因为它的父元素svg的子元素？

但是我想抑制这个动作。我怎么能这样做？

Answer 1

关于鼠标悬停功能的参数似乎没有在事件中传递，所以我提出了这个解决方案。

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 =“none”。

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

Answer 3

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

抑制某些svg子元素的鼠标交互

3 个答案: