对象 HTML 标记上的 onclick 事件不起作用，解决方法？

Question

所以我通过 <object> 标签导入了一个 SVG，它附加了一个 onclick="functionName();，但它似乎不起作用。所以我尝试在 SVG 中添加以下脚本：

<svg tag here etc
<defs>
        <script type="text/javascript">
            <![CDATA[
            document.addEventListener('click', test());
            ]]>
        </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

我的HTML:

<object id="sidebartoggle" data="graphics/test.svg" type="image/svg+xml" onclick="toggleSidebar();" style="top:50%;right:1%;position:fixed;display:flex;justify-content:flex-end;width:500px;transform: translateX(99%); z-index:9999999;" >
            </object>

...但它根本不起作用。这里需要什么解决方法？我应该怎么做才能实现我的目标 - 在 SVG 上绑定一个点击事件，它从 JS 文件执行一个函数。

Answer 1

onclick 事件不会绑定到您的对象，因为您实际上是 clicking/targeting 对象的内部内容 (svg DOM)。

作为解决方法，您可以将 css pointer-events:none 应用到对象元素并将点击事件绑定到辅助包装元素。

function toggleSidebar(){
    console.log('clicked');
}

.svg-wrp{
   cursor:pointer; 
}

.svgObject{
    display:inline-block;
  font-size:36px;
    width:1em;
    height:1em;
  background-color:transparent;
  border:1px solid red;
}

<h3>css: "pointer-events:none" – click enabled</h3>
<div class="svg-wrp" onclick="toggleSidebar()" >
  <object class="svgObject" id="sidebartoggle01" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' class='cross'%3E%3Cpolygon fill='grey' points='11.649 9.882 18.262 3.267 16.495 1.5 9.881 8.114 3.267 1.5 1.5 3.267 8.114 9.883 1.5 16.497 3.267 18.264 9.881 11.65 16.495 18.264 18.262 16.497'/%3E%3C/svg%3E" type="image/svg+xml" style="pointer-events:none" ></object>
</div>

<h3>Original &lt;object&gt; – click event is not available</h3>
<div class="svg-wrp" onclick="toggleSidebar()" >
  <object class="svgObject" id="sidebartoggle01" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' class='cross'%3E%3Cpolygon fill='grey' points='11.649 9.882 18.262 3.267 16.495 1.5 9.881 8.114 3.267 1.5 1.5 3.267 8.114 9.883 1.5 16.497 3.267 18.264 9.881 11.65 16.495 18.264 18.262 16.497'/%3E%3C/svg%3E" type="image/svg+xml"  ></object>
</div>

编辑：<script> svg 中的标签

你可以做到这一点MDN Example 但是您会遇到范围界定问题。
如果您需要通过单击 svg 元素来调用全局定义的函数，您可以在加载对象后添加一个 eventListener。

SVG

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <script>
  // <![CDATA[
  window.addEventListener('DOMContentLoaded', () => {
    function getColor () {
      const R = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
      const G = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
      const B = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
      return `#${R}${G}${B}`
    }

    document.querySelector('rect').addEventListener('click', (e) => {
      e.target.style.fill = getColor()
    })
  })
  // ]]>
  </script>
  <rect id="bg" width="100%" height="100%" fill="#ccc"></rect>
</svg>

html

<object class="svgObject" id="sidebartoggle" data="script.svg"  type="image/svg+xml" ></object>

js

function test(){
    console.log('test')
}  

var svgObject = document.getElementById("sidebartoggle");
// get svg content 
svgObject.addEventListener("load",function(){
    // get the inner DOM of svg
    var svgDoc = svgObject.contentDocument;
    var bg = svgDoc.querySelector('#bg');
    // bind click event
    bg.addEventListener('click', function(e){
        test();
    });
});

然而，添加到 svg 文件的脚本在某些环境（例如 wordpress）中也可能被视为可疑。一些文件清理过滤器将从 svg 中删除脚本标签。

对象 HTML 标记上的 onclick 事件不起作用，解决方法？

Onclick event on Object HTML Tag doesn't work, workaround?

html

javascript

svg

object

onclick