为什么在D3.js中需要两次点击才能触发我的点击事件？

Question

我有一个按钮放在foreignObject里的svg中，并通过D3将click事件附加到了foreignObject上。点击事件会触发，但只有第二次点击foreignObject时才会触发。第一次点击时会激活按钮（蓝色边框）。因此，一旦它被激活，只需要单击即可触发事件。

我想问题可能是按钮所在的组在某种程度上处于后台，但我不确定，因为这个问题也会出现在只添加一个<g>的情况下。

我还尝试直接将点击事件绑定到按钮上，但行为没有改变。

这是我的代码（这已经足够简化了）： JSFiddle 如何更改代码，以便每次都可以触发点击事件（第一次点击）？

- frankenapps

Answer 1

一个选择是不使用raise()函数

而是使用

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);<--- seems like raise eating up the event.
}

使用这个

function dragstarted(d) {
  d3.select(this).classed("active", true);
}

在这里查看可运行的代码链接。

- Cyril Cherian

---

@frankenapps 移除 raise() 函数的原因是它会重新添加元素，这会阻止浏览器分发点击事件。您可以将 raise 函数移动到 dragged 函数中即可。 - Gerardo Furtado