如何通过按钮触发对应SVG Path的点击事件以弹出提示框？

现有代码实现了点击SVG中的Path元素（数字1、2）时，弹出对应Number_1或Number_2的提示框。现在需要实现：点击页面上的Path_1按钮时，自动触发对应数字1的Path元素的点击事件；点击Path_2按钮时，触发数字2的Path元素点击事件，最终同样弹出对应的提示框。

JavaScript代码 #

let paths = document.querySelectorAll('path');
// paths is an html collection of all paths;
// attach event listeners to each path;
for (let i=0; i<paths.length; i++) {
  paths[i].addEventListener('click', event => alert(event.target.dataset.key));
}

function Path_1(){}

function Path_2(){}

HTML代码 #

<button onclick="Path_1()">Path_1</button>
<button onclick="Path_2()">Path_2</button>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600 " id="svg1">
  <g enable-background="new">
       <path data-key="Number_1" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 324.34 555.57 L 324.34 596.6 "/>
       
    <path data-key="Number_2" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 224.34 585.57 L 224.34 586.6 L 225.22 588.68 L 226.1 589.71 L 227.87 590.75 L 231.39 590.75 L 233.15 589.71 L 234.04 588.68 L 234.92 586.6 L 234.92 584.53 L 234.04 582.46 L 232.27 579.35 L 223.46 568.98 L 235.8 568.98 "/>

  </g>
</svg>

只需要修改Path_1和Path_2函数，通过data-key属性找到对应的Path元素，然后调用其click()方法触发已绑定的点击事件即可：

function Path_1(){
  // 定位到data-key为Number_1的path元素
  const path1 = document.querySelector('path[data-key="Number_1"]');
  // 触发点击事件
  path1?.click();
}

function Path_2(){
  const path2 = document.querySelector('path[data-key="Number_2"]');
  path2?.click();
}

说明 #

• 使用document.querySelector('path[data-key="XXX"]')可以精准匹配到对应数字的Path元素；
• 调用click()方法会直接触发该元素上已绑定的点击逻辑，弹出对应的提示框；
• 加入?.可选链操作符，能避免因元素不存在而抛出错误，提升代码的健壮性。

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