将click事件添加到<object> svg

Question

我在检测

中的svg上的点击事件时遇到问题

    <div class="content svgwrapper">
        <object id="SVGobject" type="image/svg+xml" data="images/MySvg.svg" width="100%" height="400">
                <img src="svg-no.png" alt="No SVG support">
            </object>
    </div>


    document.addEventListener('click', function() {
        console.log('hooray!');
    });

Answer 1

您正在将点击侦听器附加到文档。您只需将其附加到对象，例如：

document.getElementById("SVGobject").addEventListener('click', function() {
    console.log('hooray!');
});

Answer 2

那不是更好吗？

document.getElementById('SVGobject').addEventListener('click', function() {
  console.log('hooray!');
});

<div class="content svgwrapper">
  <object id="SVGobject" type="image/svg+xml" data="images/MySvg.svg" width="100%" height="400">
    <img src="svg-no.png" alt="Click on me!">
  </object>
</div>

Answer 3

将点击事件附加到object而不是document。