2

我在 HTML 中加载 SVG 文件时遇到了一个奇怪的问题。我将点击事件附加到 SVG 文件中的特定元素，效果很好。但是，我还需要将鼠标和触摸事件附加到它的父 div。似乎 SVG 对象正在捕获鼠标事件，因此它们不会冒泡到父 div。因此，我尝试将 SVG 上的指针事件设置为无。在这种情况下，父 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>

下面是我如何通过 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 对象的父“地图”div：

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

提前致谢！

4

1 回答 1

2

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

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

于 2016-10-07T22:12:07.117 回答