可以使用來自的 SVG<object> 允許點擊事件傳播到父處理程序？

Question

從 HTML <object>添加 SVG 似乎會創建一個無響應的空間，其中單擊事件不會通過 SVG 和對象元素傳播。

在示例中，這通過單擊按鈕的中心來演示。 單擊操作似乎不會將事件傳播到父元素按鈕。 但是，當單擊按鈕的邊緣（遠離 SVG）時，會調用 click 事件。

 var buttonEl = document.getElementById('button'); buttonEl.addEventListener('click', function() { console.log('Clicked!') })

 <button id="button" style="padding:5rem;"> <object data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" type="image/svg+xml" style="height:40px;width:40px;"> Check </object> </button>

Answer 1

使用pointer-events:none; 在對象元素上。

 var buttonEl = document.getElementById('button'); buttonEl.addEventListener('click', function() { console.log('Clicked!') })

 <button id="button" style="padding:5rem;"> <object style="pointer-events:none;height:40px;width:40px;" data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" type="image/svg+xml"> Check </object> </button>

Answer 2

如果您需要在 SVG 內部維護懸停樣式或其他此類交互性，@brettinternet 的回答將無濟於事。 我發現處理此問題的正確方法是將單擊偵聽器附加到<object>元素的contentDocument ，但您必須等到外部文檔加載后才能執行此操作。

let yourObject = document.querySelector('object#objid');
yourObject.addEventListener('load', event => { 
    yourObject.contentDocument.addEventListener('click', event => 
        console.log(event));
    });
});