HTML Object标签加载SVG时Onclick事件不生效，有什么可行解决方案？

问题原因 #

• <object>加载的SVG属于独立的文档上下文，点击事件默认被SVG内部捕获，不会冒泡到外层的<object>元素，所以直接给<object>绑定onclick不会生效
• 你原来SVG内部的事件绑定写法错误：addEventListener('click', test()) 中加了括号会立即执行test函数，绑定的是函数执行后的返回值，而非事件触发时调用的函数引用

解决方案 #

以下两种方案任选其一即可，最终都可以实现点击SVG调用外层JS定义的toggleSidebar函数：

方案1：修改SVG内部脚本调用外层函数 #

无需改动外层HTML代码，直接修改SVG文件内的脚本部分：

<svg tag here etc
<defs>
        <script type="text/javascript">
            <![CDATA[
            // 等待SVG加载完成后绑定事件
            document.addEventListener('DOMContentLoaded', function() {
                // 点击时调用父页面（外层HTML）定义的toggleSidebar函数
                document.addEventListener('click', function() {
                    parent.toggleSidebar();
                });
            });
            ]]>
        </script>
    <linearGradient id="bbc50e5b-4734-4535-94bd-b30475bdd571" data-name="Testingspace" x1="15" y1="310" x2="320" y2="5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#ccc"/>
      <stop offset="1" stop-color="#fff"/>
    </linearGradient>
  </defs>
the rest of SVG here

方案2：外层JS直接绑定事件，无需修改SVG文件 #

先去掉<object>标签上的onclick="toggleSidebar();"属性，然后在外层JS文件中添加如下代码：

const svgObject = document.getElementById('sidebartoggle');
// 等待SVG资源加载完成
svgObject.addEventListener('load', function() {
    // 获取SVG内部的文档对象
    const svgDoc = svgObject.contentDocument || svgObject.getSVGDocument();
    // 给SVG根元素绑定点击事件
    svgDoc.rootElement.addEventListener('click', toggleSidebar);
});

// 你原有定义的toggleSidebar函数
function toggleSidebar() {
    // 原有业务逻辑
}

注意事项 #

• 该方案仅在SVG文件和主页面同域的场景下生效，如果是本地直接打开HTML文件，部分浏览器会因为跨域安全限制阻止访问SVG内部文档，部署到Web服务器上即可正常运行
• 如果需要点击SVG局部区域触发事件，只需要把事件绑定到SVG内部对应的元素上即可，不需要绑定整个文档

内容的提问来源于stack exchange，提问作者Munchkin