d3 mousedown 事件触发，但 mouseup 事件不触发

Question

我在 d3 中看到一些奇怪的行为。我以通常的方式有一个力定向图

node = svg.selectAll(".node").data(graph.nodes).enter().append("circle")....

当有人单击节点时，我想要一个简单的动画（而不是 console.log）

function set_focus(d) { console.log('set'); }
function remove_focus() { console.log('remove'); }

node.on("mousedown", set_focus);
node.on("mouseup", remove_focus);

有趣的是，当我将鼠标放在节点上时， set 事件会触发，但当我释放鼠标时，remove_focus不会触发。有人知道发生了什么事吗？

---

d3v5、Chrome 65、macOS 10.13

Answer 1

tldr：缩放事件与您的 mouseup 事件冲突。

\n\n

我创建了一个 fork ，因为我不太确定你想要用它做什么，而且我不想弄乱你的 git 历史记录：这个链接是 fork。

\n\n

似乎一旦单击鼠标，SVG 上的 Zoom 事件就会“消耗”所有其他事件。我的印象是，这是一个已知且经常被抱怨的问题。我认为这张GitHub 票证是相关的，这张票证也是相关的。根据迈克·博斯托克，

\n\n

\n

这是预期的行为。根据发行说明：\xe2\x80\x9c缩放\n行为现在消耗已处理的事件。\xe2\x80\x9d因此，如果鼠标按下事件是缩放手势的一部分\n，则缩放行为会立即停止\n该 mouseup 事件的传播会阻止其他侦听器接收该事件（并在可能的情况下阻止关联的浏览器默认行为）。这样可以更轻松地组合缩放和拖动，如下例所示：

\n\n

http://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084

\n\n

如果要阻止缩放手势启动，请使用 Zoom.filter\n 忽略某些事件，或使用 event.stopPropagation 或 \n event.stopImmediatePropagation\n 阻止缩放行为接收启动事件。如果您想在缩放手势后执行某些操作，请监听缩放事件。

\n

\n\n

我可以mouseup通过删除d3.zoom事件或在函数d3.event.stopPropagation内调用来触发您的事件set_focus。因此，下面的两行（以及在 fork 中）让您的remove_focus函数触发，但我不确定我是否也搞乱了您希望缩放事件如何工作：

\n\n

function set_focus(d) {\n    console.log(\'set\');\n    d3.event.stopPropagation();\n    node.style("opacity", function(o) { return (d == o || o.layer == d.layer - 1) ? 1 : 0.1; });\n    link.style("opacity", function(o) { return (o.target == d.id) ? 1 : 0.02; });\n}\n\nfunction remove_focus() {\n    console.log(\'remove\');\n    d3.event.stopPropagation();\n    node.style("opacity", 1);\n    link.style("opacity", function () { return edgeOpacity; })\n}\n

\n