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

The OP wrote in an edit：

添加stopPropagation() 似乎可以正常工作；但这是最好的解决方案吗？好像几乎是黑客。

@samHanley写道：

为什么URL url; try { url = new URL("**cloudfront URL***"+imagePath); HttpURLConnection connection = (HttpURLConnection) url.openConnection(); connection.setDoOutput(true); connection.setDoInput(true); connection.setRequestMethod("PUT"); connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded"); connection.setRequestProperty("charset","UTF-8"); connection.setRequestProperty("Content-Length",imageByteArray.length+""); DataOutputStream wr = new DataOutputStream(connection.getOutputStream ()); wr.write(imageByteArray); wr.flush(); wr.close(); connection.disconnect(); // Check the HTTP response code. To complete the upload and make the object available, // you must interact with the connection object in some way. connection.getResponseCode(); System.out.println("HTTP response code: " + connection.getResponseCode()); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); }看起来像“黑客”？停止传播实际上就是您的问题的标题是问如何做。

The OP wrote：

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

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

1 个答案: