2

HTML で読み込まれた SVG ファイルで奇妙な問題が発生しました。SVG ファイル内の特定の要素にクリック イベントを添付していますが、これは正常に機能します。ただし、マウスとタッチのイベントを親 div にアタッチする必要もあります。SVG オブジェクトがマウス イベントをキャプチャしているように見えるため、親 div までバブリングしていません。そこで、SVG の pointer-event を none に設定してみます。この場合、親 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 オブジェクトを保持している親の「マップ」div にイベントを追加しています。

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

前もって感謝します！

4

1 に答える 1