Я столкнулся со странной проблемой с загруженным файлом SVG в HTML. Я привязываю события щелчка к определенным элементам в файле SVG, и это работает нормально. Но мне также нужно прикрепить события мыши и касания к родительскому div. Кажется, что объект SVG фиксирует события мыши, и поэтому они не передаются родительскому div. Итак, я пытаюсь установить для события указателя на SVG значение none. В этом случае родительский элемент div получает события мыши, но теперь дочерний элемент SVG больше не получает события мыши. Я пытаюсь установить дочерний элемент svg на события указателя: все, но все равно не получает события мыши. Что я здесь делаю неправильно?
Вот как я встраиваю файл SVG:
<div
id="map"
ng-pinchable
scale-factor="2"
max-zoom="2"
>
<object data="./media/map.svg" type="image/svg+xml"
id="mapsvg" width="100%" height="100%"></object>
</div>
Вот как я добавляю события в элемент SVG через JS:
//add event listeners to stations
var el = $scope.svgDoc.getElementById("station-test");
el.style.pointerEvents = "all";
el.addEventListener("mouseup",
function(){
$scope.stationClicked("some id");
}
);
}, false);
И здесь я добавляю события в родительский div "map", который содержит объект SVG:
el.addEventListener("click", function(){ console.log("Hello World!"); });
el.addEventListener("mousedown", function(){ console.log("mousedown"); });
Заранее спасибо!
