Question

我有一个svg组标记，我将事件侦听器鼠标悬停在该标记上。问题在于该事件正在蔓延到他的所有孩子，并在每个孩子身上生火。我希望活动仅在整个小组中开始。

<g class="courseStop" id="c-0-0">
    <path class="st5 spot2" d="M125.3,74.9c-2.2,0-4-1.8-4-4s1.8-3.9,4-3.9s3.9,1.8,3.9,3.9C129.3,73.1,127.5,74.9,125.3,74.9z"/>
    <path class="st6 spot" d="M125.3,67.7c1.8,0,3.2,1.4,3.2,3.2c0,1.8-1.4,3.2-3.2,3.2s-3.2-1.4-3.2-3.2C122.1,69.1,123.6,67.7,125.3,67.7
    M125.3,66.2c-2.6,0-4.7,2.1-4.7,4.7s2.1,4.7,4.7,4.7s4.7-2.1,4.7-4.7C130,68.3,127.9,66.2,125.3,66.2L125.3,66.2z"/>
</g>

我有很多.courseStop，并为每个人分配一个事件监听器。

courseStops[j].addEventListener("mouseover", function(event){                    
     app.selectTooltip('.c-'+j);
})

问题是，当鼠标悬停在每个<path>而不是整个<g>上时，事件开始

Answer 1

指针事件没有传播，它正在冒泡。

根据SVG 1.1，仅当指针位于graphics element之上，而<g>之上时，才会引发指针事件。仅当指针位于包含在该组中的包含的路径之一或其他图形元素上然后冒泡时，mouseover才会引发。尽管如此，pointer-events属性可让您控制要进行命中测试的区域。

SVG 2添加一个pointer-events: bounding-box值。从理论上讲，这将使您有机会在整个小组的边界上引发事件，但是它是SVG 2中的新功能，尚未在所有地方实现（Chrome：是，Firefox：否。我无法找到完整的兼容性列表）。

如果这不符合引发事件的要求，则需要向该组中添加一个不可见的grafics元素（例如，<rect>和style="fill:none;pointer-events:fill"）才能在那里触发

停止SVG组事件传播

1 个答案: