Остановить распространение группового события SVG

У меня есть групповой тег 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>

🤔 А знаете ли вы, что...
JavaScript поддерживает асинхронное программирование с использованием промисов и асинхронных функций.


502
1

Ответ:

Событие указателя не распространяется вниз, оно поднимается вверх.

Согласно SVG 1.1, события указателя возникают, только если указатель находится над графический элемент, а <g> - нет. mouseover будет поднят только в том случае, если указатель находится над одним из содержащихся путей или других графических элементов, которые участвуют в группе, а затем всплывает вверх. Тем не менее, свойство pointer-events дает вам некоторый контроль над тем, какая именно область рассматривается для проверки попадания.

SVG 2 добавляет значение pointer-events: bounding-box. Теоретически это дало бы вам возможность инициировать события над ограничивающей рамкой группы в целом, но это новость в SVG 2 и еще не реализована повсеместно (Chrome: да, Firefox: нет. Я не могу найти полный список совместимости).

Если это не соответствует вашим требованиям, где должно возникать событие, вам необходимо добавить невидимый графический элемент (например, <rect> с style = "fill:none;pointer-events:fill") в группу, чтобы инициировать его там.