javascript - SVG 对象显示切换停止 EventListener

Question

我设法加载了一个外部 svg 并获取了路径名称并将其插入到工具提示中。

但是当我现在切换包含 svg 对象的 div 的显示时，EventListener 不知何故不再工作(它只在 FireFox 中工作)并且路径名称将不会再次显示。知道为什么 Safari 和 Chrome 不再听了吗？

window.onload = function() {
  var a = document.getElementById("Map1");
  var svgDoc = a.contentDocument;
  var myImage = svgDoc.getElementsByTagName("path");

  for (var i = 0; i < myImage.length; i++) {
    myImage[i].addEventListener('mouseover', show);
    myImage[i].addEventListener('mouseout', hide);
  }

  var text = document.getElementById("show");

  function show() {
    var myID = this.id;
    text.innerHTML = myID;
    document.getElementById("show").style.display = "block";
  }

  function hide() {
    var myID = this.id;
    text.innerHTML = '';
    document.getElementById("show").style.display = "none";
  }
}

function myFunction() {
  var toggle = document.getElementById("Map");
  toggle.style.display = toggle.style.display === 'none' ? 'block' : 'none';
}

#show {
  display: none;
}

<button onclick="myFunction()">Show Map!</button>
<div id="show" style="position: absolute; left: 100px; background-color:aqua; padding: 5px;"></div>
<div id="Map" style="display: block;"><object id='Map1' data="Test-01.svg" type="image/svg+xml">Your browser doesn't support SVG</object></div>

Answer 1

这是一个奇怪的错误，我确实重现了它 here .

这个bug的核心是webkit浏览器会卸载<object>或 <embed> CSS display 时的内容设置为无。这样做，它将删除所有内容，包括您的事件监听器。

因此，您有两种可能的解决方法(至少):

---

1 - 使用<iframe> . 此标记与此错误无关...

Live example

---

2 - 使用其他一些 CSS 规则来隐藏您的 <object> .像下面这样的东西应该提供与 display: none 相同的功能

object.hidden {
  position: absolute;
  z-index: -99;
  width: 0px;
  height: 0px;
  visibility: hidden;
  pointer-events: none;
  }

Live example

---

为了增加更多的怪异，这个错误 doesn't affect BlobURIs in chrome _{(无法在 Safari 中测试，blob 被下载，另一个错误...)}。