Question

我在HTML中加载了一个SVG文件遇到了一个奇怪的问题。我将点击事件附加到SVG文件中的特定元素，这可以正常工作。但是，我还需要将鼠标和触摸事件附加到它的父div。似乎SVG对象正在捕获鼠标事件，因此它们不会冒泡到父div。所以，我尝试将SVG上的指针事件设置为无。在这种情况下，父div接收鼠标事件，但现在子SVG元素不再获取鼠标事件。我尝试将子svg元素设置为指针事件：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");
  }

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

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

1 个答案: