SVG path元素的stopPropagation()失效问题排查

核心问题是事件类型不匹配：

• path绑定的是click事件，该事件需完成mousedown+mouseup动作后才触发
• container绑定的是mousedown事件，该事件在鼠标按下瞬间就会触发，触发时机早于click事件

event.stopPropagation()只能阻止同类型事件的冒泡传递，你在click事件里调用它，根本管不到更早触发的mousedown事件，所以container的mousedown依然会执行。

要实现点击path时不触发container的mousedown，需要在path的mousedown事件里阻止冒泡：

const container = document.getElementById("container")
const path = document.getElementById("myPath")

// 给path绑定mousedown事件，阻止冒泡
path.onmousedown = (event) => {
    event.stopPropagation()
}

path.onclick = () => {
    console.log("path clicked !")
}

container.onmousedown = () => {
    console.log("container clicked !")
}

这样点击path时，mousedown事件会先被path捕获并阻止冒泡，container的mousedown就不会触发；完成mouseup动作后，path的click事件会正常执行。

如果不需要区分click和mousedown的触发逻辑，也可以直接把逻辑合并到mousedown事件里：

path.onmousedown = (event) => {
    event.stopPropagation()
    console.log("path clicked !")
}

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