Javascript 捕获对象中SVG元素上的鼠标事件，以及它'；s父容器div

我在加载HTML格式的SVG文件时遇到了一个奇怪的问题。我将单击事件附加到SVG文件中的特定元素，效果很好。但是，我还需要将鼠标和触摸事件附加到它的父div。似乎SVG对象正在捕获鼠标事件，因此它们不会冒泡到父div。因此，我尝试将SVG上的指针事件设置为“无”。在本例中，父div接收鼠标事件，但现在子SVG元素不再获取鼠标事件。我尝试将子svg元素设置为pointer events:all，但它仍然无法获取鼠标事件。我做错了什么

以下是我如何嵌入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对象的父“map”div添加事件：

 el.addEventListener("click", function(){ console.log("Hello World!"); });
 el.addEventListener("mousedown", function(){ console.log("mousedown"); });

---

提前谢谢

好吧，到目前为止，我还不明白为什么SVG元素没有得到点击事件，所以我只做了一个JS函数，它迭代所有子元素，并将鼠标位置与SVG对象的边界矩形进行比较，基本上按照我的预期重新创建点击行为

$scope.onClickMap = function(event){
  console.log("on click map");
  var markers = $scope.svgDoc.querySelectorAll('*[id^="station"]');
  for(i=0;i<markers.length;i++){
    console.log("found markers: ",markers[i]);
    var rect = markers[i].getBoundingClientRect();
    if(event.offsetX > rect.left)
      if(event.offsetX < rect.right)
        if(event.offsetY > rect.top)
          if(event.offsetY < rect.bottom)
            $scope.stationClicked("some id");
  }

$scope.onClickMap=函数（事件）{
console.log（“点击地图”）；
var markers=$scope.svgDoc.querySelectorAll（'*[id^=“station”]”）；
对于（i=0；i直接左）
if（event.offsetXrect.top）
if（event.offsetY

---

因此，它现在对我起作用了，但我很想知道为什么点击事件没有像预期的那样触发/冒泡，如果有人有更好的方法的话。谢谢。

您是否尝试将svg代码直接粘贴到元素中的html？它解决了很多类似的问题。@AliSomay我考虑过这一点，但我不想这样做，因为我希望能够继续编辑SVG文件，而不必每次修改时都复制和粘贴代码。虽然我意识到我也可以为这类事情创建一个咕噜/咕噜任务，但它回避了一个问题：解决问题的最有效途径是什么？在我的例子中，我已经通过上面描述的方法使它工作了。但是，感谢您的建议。getElementById（“station test”）我没有看到id为“station test”的元素。请澄清。

$scope.onClickMap = function(event){
  console.log("on click map");
  var markers = $scope.svgDoc.querySelectorAll('*[id^="station"]');
  for(i=0;i<markers.length;i++){
    console.log("found markers: ",markers[i]);
    var rect = markers[i].getBoundingClientRect();
    if(event.offsetX > rect.left)
      if(event.offsetX < rect.right)
        if(event.offsetY > rect.top)
          if(event.offsetY < rect.bottom)
            $scope.stationClicked("some id");
  }