我有一组嵌套的元素 (SVG)。根元素是图，子元素是图中的元素（线、轴等）。简化示例：
<g transform="translate(80,10)" id="mainGraph">
<g class="Line">
<path d="....."></path>
</g>
</g>
我的问题是，如果我将 mouseover/mousemove 事件（例如，使用 D3.on("mouseover") ）绑定到 mainGraph 元素，它只会在我将鼠标移到其中一个子元素上时触发。
我读到的其中一个内容是后面的元素有优先级，所以我将 .style("pointer-events","none") 添加到所有子元素中，但这不起作用。
【问题讨论】：
标签： javascript events svg d3.js mouse
有一个非常相似的问题。是由我两次声明事件侦听器引起的：
.on('mousemove', function (event, d) {
// Mouse event stuffs
}
.on('mousemove', function (event, d) {
// Mouse event stuffs again (overwrites above declaration).
}
通过每个事件只声明一个侦听器函数而不是两个来修复。
D3 不会警告你这么愚蠢。因此，请确保您只声明每个鼠标相关的事件侦听器一次。
【讨论】：
我也面临同样的问题。
解决办法是给父元素添加css属性
pointer-events: stroke;
或
pointer-events: visibleStroke;
【讨论】：
除了使用rect 元素外，它还应该有一个像pointer-events: all; 这样的CSS 属性集，以便触发事件。
【讨论】：
pointer-events是关键，不管它是否嵌套。默认值将使其仅在visiblePainted 时接受事件，请参阅developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。
一种方法是添加一个填充整个表面的矩形作为第一个元素，以捕获后面添加的元素未捕获的鼠标事件：
something.append('svg:rect')
.attr('width', width) // the whole width of g/svg
.attr('height', height) // the whole heigh of g/svg
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseover', function() {
// do something
}
});
我相信<g> 元素（在您的示例中为 mainGraph）只是一个容器，而不是可以接收鼠标事件的实际形状。
您也许可以在 svg 元素本身上添加鼠标事件侦听器，但我认为 <g> 不会起作用。
【讨论】：
g 应该可以工作。
g 元素（与div 不同）只是一个无形的容器，因此没有尺寸。因此，如果您希望将鼠标悬停应用于矩形区域，则需要指定矩形内容，例如 rect。然而，一个有用的改进是使用 fill: none 和 pointer-events: all 样式。
g 中的 path 元素的行为方式是否相同？