子元素为object标签时，父级div绑定的点击事件无法正常触发怎么办？

• <object> 标签加载外部资源时会生成独立的嵌套浏览上下文，内部触发的DOM事件默认不会冒泡到父级页面的DOM树，因此点击object覆盖的区域时，父div绑定的点击事件无法被触发。
• 你提供的复现代码中仅为object设置了width: inherit，未设置高度属性，object未撑满父div，只有未被object覆盖的右下角区域可以直接触发父div的点击事件。

根据你的使用场景可以选择以下任意一种方案：

方案1：无需和SVG内部交互时首选 #

给object添加pointer-events: none样式，让object忽略所有鼠标交互事件，点击会直接穿透到父div，无需修改其他逻辑：

// 创建object时添加该样式
imageChild.style.pointerEvents = 'none';
// 若需要让object撑满父div，补充高度设置
imageChild.style.height = 'inherit';

方案2：需要和SVG内部DOM交互时使用 #

等object加载完成后，给其内部的文档对象绑定点击事件，手动触发父div的点击逻辑：

imageChild.onload = function() {
  // 绑定object内部文档的点击事件
  this.contentDocument.addEventListener('click', () => {
    // 执行父div的点击逻辑，也可以直接调用divContainer.click()
    console.log('Click OK!');
  });
}
// 补充高度设置让object撑满父div
imageChild.style.height = 'inherit';

方案3：仅用作图片展示时使用 #

如果不需要操作SVG内部的DOM节点，直接替换<object>为<img>标签加载SVG即可，不存在独立上下文，事件冒泡逻辑和普通图片完全一致：

let imageChild = document.createElement('img');
imageChild.src = 'https://svgsilh.com/svg_v2/48363.svg';
imageChild.className = 'imageChild';
imageChild.style.width = 'inherit';
imageChild.style.height = 'inherit';

内容的提问来源于stack exchange，提问作者ozika