物件HTML標記上的Onclick事件不起作用，解決方法？

所以我有一個通過<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 檔案執行一個函式。

uj5u.com熱心網友回復：

onclick 事件不會系結到您的物件，因為您實際上是在單擊/定位物件的內部內容 (svg DOM)。

作為一種解決方法，您可以將 csspointer-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," 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," 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 中去除腳本標簽。

標籤：javascript html 目的 svg 点击

上一篇：如何僅將懸停應用于X而不是圓圈

下一篇：如何在svg圓內渲染n個切片？