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

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

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

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