在对象中捕获SVG元素上的鼠标事件，也是父容器div

我遇到了一个奇怪的问题，在HTML中加载了SVG文件。我将点击事件附加到SVG文件中的特定元素，这很好。但是，我还需要将鼠标和触摸事件附加到它的父div。似乎SVG对象正在捕获鼠标事件，因此它们不会冒泡到父div。所以，我尝试将SVG上的指针事件设置为none。在这种情况下，父div接收鼠标事件，但现在，子SVG元素不再获取鼠标事件。我尝试将child svg元素设置为pointer-events：all，但仍然没有获得鼠标事件。我在这里做错了什么？在对象中捕获SVG元素上的鼠标事件，也是父容器div

这里是我很嵌入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);

在这里，我添加事件到父“地图”div是持有SVG对象：

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

在此先感谢！

来源

2016-10-07 JackKalish

好吧，到目前为止，我无法弄清楚为什么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-07 22:12:07 JackKalish

您是否尝试将svg代码直接粘贴到

@AliSomay我考虑过这个，但我宁愿不这样做，因为我希望能够继续编辑SVG文件，而无需在每次更改时都复制并粘贴代码。虽然，我意识到我也可以为这类事情创造一个咕噜/吞咽任务，但它引发了什么是解决问题最有效的途径？在我的情况下，我已经通过上述方法运作了。不过谢谢你的建议。 – JackKalish

在对象中捕获SVG元素上的鼠标事件，也是父容器div

回答

相关问题