如何为多个嵌入的SVG元素添加动态点击事件监听？

当然可以！不用为每个SVG单独写重复代码，我们可以通过批量选择元素+遍历绑定的方式来处理，同时还要注意SVG的加载时机（避免还没加载完就去拿DOM）。下面是几种实用的实现方式：

方法1：通过属性选择器选中所有SVG Object元素 #

你的所有<object>标签都带有type="image/svg+xml"属性，我们可以直接用这个属性来筛选所有目标元素，然后逐个处理：

原生JavaScript版本 #

// 选中所有SVG类型的object元素
const svgObjects = document.querySelectorAll('object[type="image/svg+xml"]');

// 遍历每个元素，绑定事件
svgObjects.forEach(obj => {
  // 监听SVG加载完成事件，确保能拿到正确的contentDocument
  obj.addEventListener('load', function() {
    const svgDoc = this.contentDocument;
    if (!svgDoc) return; // 防错：如果加载失败就跳过
    
    // 给SVG内部的节点绑定点击事件
    svgDoc.addEventListener('click', function(event) {
      // 这里写你的点击逻辑，比如判断点击的是哪个节点
      const target = event.target;
      console.log('点击了SVG节点:', target.tagName, target.id);
      // 执行你的指定函数
      // yourFunction(target);
    });
  });
});

jQuery版本 #

如果你习惯用jQuery，可以这样写：

// 选中所有SVG类型的object元素
$('object[type="image/svg+xml"]').each(function() {
  const $obj = $(this);
  // 监听加载完成
  $obj.on('load', function() {
    const svgDoc = this.contentDocument;
    if (!svgDoc) return;
    
    $(svgDoc).on('click', function(event) {
      const target = event.target;
      console.log('点击了SVG节点:', target.tagName, target.id);
      // 执行你的指定函数
      // yourFunction(target);
    });
  });
});

方法2：给SVG Object添加统一类名 #

如果后续可能有其他类型的<object>，可以给所有需要处理的SVG标签加一个统一类名，比如interactive-svg：

<object data="/path1" type="image/svg+xml" class="interactive-svg" id="index"></object>
<object data="/path2" type="image/svg+xml" class="interactive-svg"></object>

然后选择器换成.interactive-svg即可，逻辑和上面一致，这样更灵活。

关键注意点 #

• 必须监听load事件：因为<object>加载SVG是异步的，如果页面刚加载完就直接拿contentDocument，可能还没加载好，会返回null。
• 防错处理：加入if (!svgDoc) return可以避免加载失败时的报错。
• 事件委托（可选）：如果SVG内部的节点是动态生成的，你可以把点击事件委托到SVG根元素上，这样新添加的节点也能触发事件，和普通DOM的事件委托逻辑一样。

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