У меня есть групповой тег 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 поддерживает асинхронное программирование с использованием промисов и асинхронных функций.
Событие указателя не распространяется вниз, оно поднимается вверх.
Согласно SVG 1.1, события указателя возникают, только если указатель находится над графический элемент, а <g>
- нет. mouseover
будет поднят только в том случае, если указатель находится над одним из содержащихся путей или других графических элементов, которые участвуют в группе, а затем всплывает вверх. Тем не менее, свойство pointer-events
дает вам некоторый контроль над тем, какая именно область рассматривается для проверки попадания.
SVG 2 добавляет значение pointer-events: bounding-box
. Теоретически это дало бы вам возможность инициировать события над ограничивающей рамкой группы в целом, но это новость в SVG 2 и еще не реализована повсеместно (Chrome: да, Firefox: нет. Я не могу найти полный список совместимости).
Если это не соответствует вашим требованиям, где должно возникать событие, вам необходимо добавить невидимый графический элемент (например, <rect>
с style = "fill:none;pointer-events:fill"
) в группу, чтобы инициировать его там.