单击处理程序不适用于以 <object> 作为子级的 <div>答案

【问题标题】：Click handler not working for <div> with <object> as child单击处理程序不适用于以 <object> 作为子级的 <div>
【发布时间】：2021-11-27 13:25:33
【问题描述】：

我只有两个元素，一个 div 附加一个 object 作为子元素，其中包含一个 SVG 图像。当只有div 本身或另一个标签作为它的子标签时，点击处理程序可以正常工作，例如img。但是，当object 是孩子时，div 点击处理程序仅在右下角触发。我真的不知道是什么导致了这种行为。

let divContainer = document.createElement('div');
divContainer.className = 'divContainer';
divContainer.style.position = 'absolute'
divContainer.style.top = '100px';
divContainer.style.width = '150px';
divContainer.style.height = '150px';
divContainer.style.background = 'green';
  
let imageChild = document.createElement('object');
imageChild.type = 'image/svg+xml';
imageChild.data = 'https://svgsilh.com/svg_v2/48363.svg'
imageChild.className = 'imageChild';
imageChild.style.width = 'inherit';
   
document.body.append(divContainer);
// Comment this out, and it works fine
divContainer.append(imageChild);

divContainer.onclick = function(event) {
  console.log('Click OK!');
}

【问题讨论】：

你的猪在容器的顶部；禁用对猪的点击：imageChild.style.pointerEvents="none";
你的意思是写“猪”吗？ @Danny'365CSI'Engelman？
<object> 正在吞噬所有的点击事件。您将不得不按照@Danny'365CSI'Engelman 的建议禁用指针事件。
非常感谢，完美运行！ @Danny'365CSI'Engelman
对不起“你这个猪”。英语不是我的母语；在荷兰语中，you 和 your 可以是相似的拼写..

标签： javascript svg

【解决方案1】：

这是工作代码

  let divContainer = document.createElement('div');
  divContainer.className = 'divContainer';
  divContainer.style.top = '100px';
  divContainer.style.width = '150px';
  divContainer.style.height = '150px';
  divContainer.style.background = 'green';

  let imageChild = document.createElement('object');
  imageChild.type = 'image/svg+xml';
  imageChild.data = 'https://svgsilh.com/svg_v2/48363.svg';
  imageChild.className = 'imageChild';
  imageChild.style.width = 'inherit';
  imageChild.style.pointerEvents = 'none';

  document.body.append(divContainer);
  // Comment this out, and it works fine
  divContainer.append(imageChild);

  divContainer.addEventListener('click', function () {
    alert('Click OK!');
  });

【讨论】：