### [SVG 内嵌元素的鼠标事件为何不触发](https://www.huociguo.com/article/1638)

**Published:** 2026-10-01T13:14:39

**Author:** 米了

**Excerpt:** 用 object 载入的 SVG，内部元素绑定鼠标进入事件没有反应。原因有两层：绑定时机早于文档加载完成，以及…

用 object 载入的 SVG，内部元素绑定鼠标进入事件没有反应。原因有两层：绑定时机早于文档加载完成，以及事件需要绑在内部文档的节点上。

![镜头下的代码画面](https://api.huociguo.com/wp-content/uploads/2026/10/e7.jpg)

内嵌文档有独立的加载时机与样式作用域

## 取到内部文档

```
const obj = document.querySelector('object');
obj.addEventListener('load', () => {
  const doc = obj.contentDocument;
  const node = doc.querySelector('#part');
  node.addEventListener('mouseenter', handler);
});
```

必须等载入完成之后再访问内部文档。提前访问得到的是空文档，选择器返回空值，绑定静默失败。

## 同源限制

跨域载入的 SVG 拿不到内部文档，contentDocument 为空。改用内联 SVG，或由同源接口提供文件。

## 光标样式

内部文档的样式不受外层样式表影响。要在内部元素上改光标，需要把样式写进 SVG 文件，或由脚本在内部文档里插入样式节点。

```
const style = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
style.textContent = '#part { cursor: pointer; }';
doc.documentElement.appendChild(style);
```

## 事件类型选择

| 事件  | 冒泡  | 适合  |
| --- | --- | --- |
| mouseenter | 不冒泡 | 单个元素进入 |
| mouseover | 冒泡  | 委托到根节点 |

需要统一处理多个内部元素时，把监听绑在内部文档的根节点上，用 mouseover 配合事件目标判断。

**Tags:** mouseenter事件, object标签, SVG嵌入, 事件绑定, 跨文档访问

**Categories:** HTML5

---