是否可以使用 SVG 允许<object>单击事件传播到父处理程序？

Question

从HTML<object>添加SVG会创建一个无响应空间，在该空间中，单击事件不会通过SVG和对象元素传播。

在本例中，通过单击按钮的中心来演示这一点。单击操作似乎不会将事件传播到父元素按钮。但是，当单击按钮的边缘(远离SVG(时，会调用单击事件。

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

@brettinternet的答案对您是否有悬停样式或其他需要在SVG中维护的交互没有帮助。我发现处理此问题的正确方法是将您的点击侦听器附加到<object>元素的contentDocument，但您必须等到加载了外部文档后才能执行此操作。

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