オブジェクト内のSVG要素上のマウスイベントをキャプチャし、親コンテナdivでもある

Question

HTMLで読み込まれたSVGファイルで奇妙な問題が発生しました。私はクリックイベントをSVGファイルの特定の要素に添付していますが、これはうまくいきます。しかし、私はまたそれを親divにマウスとタッチのイベントを添付する必要があります。 SVGオブジェクトがマウスイベントをキャプチャしていると思われるため、親divにバブリングしていません。ですから、私はSVG上のポインタイベントをnoneに設定しようとします。この場合、親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"); }); 

ありがとうございます！

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"); 
    } 

だから、今の私のために働いているが、私は誰もがこれを行うのより良い方法のアイデアを持っている場合、クリックイベントは、予想通りバブリング/トリガーされていない理由として聞いて好奇心だろう。ありがとう。