SVG路径点击事件优化：仅点击数字2区域触发Alert弹窗

问题出在你把点击事件绑定在了外层的<div>上——div是块级元素，会占满整个可用空间，所以点击div内任何区域（哪怕离数字2很远）都会触发弹窗。要实现仅点击数字2区域才触发，只需要把点击事件绑定到绘制数字2的<path>元素上即可：

修改后的代码 #

JavaScript部分 #

function getKey(pathElement) {
  const key = pathElement.dataset.key;
  alert('key is ' + key);
}

HTML部分 #

<div>
<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 onClick="getKey(this)" data-key="12345" transform="matrix(1,0,0,-1,0,600)" stroke-width=".74" 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>
</div>

说明 #

• 移除了div上的onClick事件，避免无关区域触发弹窗
• 把点击事件直接绑定到<path>上，只有点击到数字2的路径（包括描边区域）才会触发弹窗
• 因为this现在指向path元素本身，JS里可以直接读取它的dataset.key，不需要再用querySelector查找路径

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