SVG元素上的鼠标事件处理程序-防止传播？

Question

我有一个<svg>元素，该元素具有多个子<g>元素，这些元素具有绑定到它们的jQuery鼠标事件处理程序。因此，当mousedown事件在这些元素之一上触发时，将被突出显示，如下所示：

('.foo').bind('mousedown', function(e) {
     ($(this).find("*")).each(function(child) {
        child.setAttribute("fill", "blue");
        child.setAttribute("stroke", "blue");
     });
});

我希望元素在用户单击SVG的另一部分时突出显示[[un。我以前的实现涉及HTML5 canvas，因此所有事件处理程序都绑定到同一个非分层对象。但是，我正在努力了解如何使用SVG重新实现此功能。我认为将mousedown的处理程序绑定到根SVG元素本身就足够了，但这似乎完全覆盖了<g>元素的处理程序。

我想我必须以某种方式防止事件沿层次结构传播。我遇到过关于这种事情的参考-那是正确的解决方案，我将如何实现？

更新：添加e.stopPropagation() 似乎

起作用；但这是最好的解决方案吗？似乎几乎像个黑客。

Answer 1

添加e.stopPropagation()

似乎开始工作；但这是最好的解决方案吗？似乎几乎像个黑客。

@ samHanley写道：

为什么stopPropagation()看起来像“黑客”？停止传播实际上就是您的问题的标题是问如何做。

The OP wrote：

是的，我应该用不同的措词来表达标题。但是我受到this文章的影响。实际上，我也在该页面上实现了该解决方案。我不确定最好的选择是什么