如何为多个带唯一ID的SVG元素批量添加点击事件并优化代码

我有多个带有唯一ID、共享同一site类的SVG元素（包括g、path、polygon），需要实现点击这些元素时显示对应的div，点击元素外部则隐藏该div。目前给每个ID单独绑定事件的方式会产生大量冗余代码，想只用一段代码完成所有元素的功能。

现有代码示例 #

SVG结构 #

<svg>
  <!-- 1002027 -->
  <polygon id="_1002027" data-name="1002027" class="site" points="1708.49 1009.6 1719.01 1018.1 1752.71 1014.51 1761.21 1003.99 1757.63 970.29 1747.1 961.79 1713.41 965.37 1704.9 975.9 1708.49 1009.6"/>
  <!-- 1002028 -->
  <polygon id="_1002028" data-name="1002028" class="site" points="1708.49 1009.6 1719.01 1018.1 1752.71 1014.51 1761.21 1003.99 1757.63 970.29 1747.1 961.79 1713.41 965.37 1704.9 975.9 1708.49 1009.6"/>
  <!-- ... 更多元素 -->
</svg>

对应Div结构 #

<div id="content_1002027" class="svgcontent">Text Here</div>
<!-- and -->
<div id="content_1002028" class="svgcontent">Text Here</div>
<!-- ... 更多对应div -->

冗余的旧实现代码 #

// Show 1002027
document.getElementById('_1002027').addEventListener('click', function (event) {
  document.getElementById("content_1002027").style.display = "block";
}, false);

// Show 1002028
document.getElementById('_1002028').addEventListener('click', function (event) {
  document.getElementById("content_1002028").style.display = "block";
}, false);

document.addEventListener('click', function clickOutside(event) {
  // Hide 1002027
  if (!document.getElementById('_1002027').contains(event.target)) {
    document.getElementById("content_1002027").style.display = 'none';
  }
  // Hide 1002028
  if (!document.getElementById('_1002028').contains(event.target)) {
    document.getElementById("content_1002028").style.display = 'none';
  }
});

优化方案代码 #

// 记录当前激活的内容div
let activeContent = null;

// 批量给所有.site元素绑定点击事件
document.querySelectorAll('.site').forEach(siteElement => {
  siteElement.addEventListener('click', function(event) {
    // 阻止事件冒泡，避免触发document的点击事件直接隐藏
    event.stopPropagation();
    
    // 获取元素的唯一标识（用data-name更直接，避免处理id的下划线）
    const siteId = this.dataset.name;
    const targetContent = document.getElementById(`content_${siteId}`);
    
    // 先隐藏之前激活的内容
    if (activeContent) {
      activeContent.style.display = 'none';
    }
    
    // 显示当前目标内容
    targetContent.style.display = 'block';
    activeContent = targetContent;
  });
});

// 点击外部隐藏激活的内容
document.addEventListener('click', function(event) {
  // 判断点击目标是否是.site元素或激活的内容div
  const isSiteElement = event.target.closest('.site');
  const isActiveContent = event.target === activeContent || activeContent?.contains(event.target);
  
  if (!isSiteElement && !isActiveContent && activeContent) {
    activeContent.style.display = 'none';
    activeContent = null;
  }
});

优化思路说明 #

• 批量绑定事件：通过document.querySelectorAll('.site')获取所有目标SVG元素，用forEach循环绑定点击事件，彻底消除重复代码。
• 统一标识匹配：利用元素的data-name属性直接获取唯一编号，拼接出对应div的ID，比解析id的下划线更可靠、更简洁。
• 激活状态管理：用activeContent变量记录当前显示的div，点击新元素时先隐藏旧内容，再显示新内容，避免多个div同时显示。
• 精准外部判断：点击document时，通过closest('.site')判断是否点击了SVG元素，同时检查是否点击了激活的内容div，只有点击真正的外部区域时才隐藏内容。
• 阻止冒泡：在SVG元素的点击事件中调用event.stopPropagation()，避免触发document的点击事件导致刚显示的div立刻被隐藏。

内容的提问来源于stack exchange，提问作者Nithinat S.