Javascript单击Svg / object元素不会在移动设备上触发

Question

您好，我在点击/触摸显示时遇到问题，当使用object 嵌入 SVG 时，它将切换 DOM 中 Svg 外部的 div 以显示在 svg 内的元素上。我尝试了许多不同的方法，但没有做任何事情。这里有没有友好的人，可以给我正确的方法来做到这一点

我尝试使用touchstart 我还尝试了我拥有的另一个代码，该代码不适用于桌面和移动设备上的 svg。但是当我为此使用该脚本时，它无法在 svg 中读取。感觉问题在于手机读取 svg 的方式不同，因此代码不起作用。

我确实看过这里的很多帖子，但大多数都与点击事件无关，我真的没有能力重写它们。

所以这是结构： 首先我有我的。

在此之下我加载了脚本（我确实尝试在对象上使用它，但在 html head 中仍然没有）

<object class="nSvg" type="image/svg+xml" data="img/emne.svg"></object>




<div id="boxOpen" class="boxOpenHidden">
    <div id="naturSkiferBruges">
        <h2>test</h2>
        <p>test</p>
    </div>
</div>
<script type="text/javascript">
   var nSvg = document.getElementsByClassName("nSvg")[0];
   nSvg.addEventListener("load",function(){
               var sSvg = nSvg.contentDocument;
               var subEle = sSvg.getElementsByClassName("myclass")[0];
               subEle.addEventListener("click",function(){
                       $('#boxOpen').toggleClass('boxOpenVis');
                }, false);
             }, false);
</script>

这是我尝试点击的 svg 元素：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="2000" viewBox="0 0 1920 2000">
<text class="myclass" data-name="myclass" x="158.25" y="1298.112">Hvor kan Kobbertag et bruges?</text>
</svg>

Answer 1

你来了，伙计：

HTML：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="2000" viewBox="0 0 1920 2000" class="nSvg">
  <text class="myclass" data-name="myclass" x="158.25" y="1298.112">Hvor kan Kobbertag et bruges?</text>
</svg>

JS：

   var Svg = document.getElementsByClassName("nSvg")[0];
   let texts = Svg.getElementsByClassName("myclass");

   for (text of texts) {
     text.addEventListener("click", function() {
       alert("OK");
     }, false);
   }

现场演示：https://jsfiddle.net/mr39e54h/

PS：尝试点击文字

更新： 您可以通过遍历children 的contentDocument 来绑定加载的svg 上的事件。

var nSvg = document.getElementsByClassName("nSvg")[0];
nSvg.addEventListener("load", function() {
  var text = nSvg.contentDocument.getElementsByClassName('myclass')[0];
  text.addEventListener("click", function() {
     $('#boxOpen').toggleClass('boxOpenVis');
  }, false);
}, false);