使用JavaScript检测SVG内指定元素点击事件并触发弹窗

现有HTML结构 #

<div id="anim">
    <svg>
        <defs><clipPath id="__lottie_element_2"></defs>
        <g>
            <g class="aaaaa"></g>
            <g id="bbbbb"></g>
            <g id="ccccc"></g>
        </g>
    </svg>
</div>

功能需求 #

• 检测id为anim的容器内class为aaaaa的元素点击事件，触发弹窗：alert("you have pressed class aaaaa")
• 检测id为anim的容器内id为bbbbb的元素点击事件，触发弹窗：alert("you have pressed id bbbbb")

原代码的问题 #

原代码存在多处错误导致功能失效：

1. 选择器错误：使用div.anim匹配class为anim的div，但目标容器是id为anim的div，正确选择器应为div#anim
2. querySelector仅返回第一个匹配元素，无法同时选中多个目标元素
3. 调用getAttribute("id")将DOM元素对象转为字符串，字符串无法绑定事件监听

正确实现代码 #

window.addEventListener("load", function () {
    // 选中class为aaaaa的元素并绑定点击事件
    const aaaaaEl = document.querySelector('#anim .aaaaa');
    aaaaaEl.addEventListener('click', function() {
        alert("you have pressed class aaaaa");
    });

    // 选中id为bbbbb的元素并绑定点击事件
    const bbbbbEl = document.querySelector('#anim #bbbbb');
    bbbbbEl.addEventListener('click', function() {
        alert("you have pressed id bbbbb");
    });
});

补充：事件委托实现（适配动态元素场景） #

如果目标元素是动态生成的，推荐用父容器委托事件的方式，避免元素不存在时绑定失败：

window.addEventListener("load", function () {
    const animContainer = document.getElementById('anim');
    animContainer.addEventListener('click', function(e) {
        const target = e.target;
        if (target.classList.contains('aaaaa')) {
            alert("you have pressed class aaaaa");
        } else if (target.id === 'bbbbb') {
            alert("you have pressed id bbbbb");
        }
    });
});

内容的提问来源于stack exchange，提问作者José Castro Basso