javascript - 捕获对象中 SVG 元素及其父容器 div 上的鼠标事件

Question

我在加载 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>

下面是我如何通过 JS 向 SVG 元素添加事件:

//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);

在这里，我将事件添加到包含 SVG 对象的父“ map ”div:

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

提前致谢!

Answer 1

好吧，到目前为止我无法弄清楚为什么 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");
  }

所以它现在对我有用，但我很想知道为什么点击事件没有按预期触发/冒泡，如果有人有更好的方法来做到这一点。谢谢。