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

Question

从 HTML 添加 SVG<object>似乎会创建一个无响应的空间，其中单击事件不会通过 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>