Question

有没有办法在不使用this的情况下访问事件目标（DOM元素）？我在一个对象中，我希望this绑定到对象本身。全局d3.event显然没有存储目标 - d3.event.target不起作用。任何线索？

编辑：这是我正在运行的代码（它是coffeescript）：

@nodes = @svg.selectAll('g.node')
  .data(@nodes, (d) -> d.key)
  .enter()
  .append('g')
  .attr('class', 'node')
  .attr('transform', (d) => "translate(#{@x d.x},#{@y d.y})")
@nodes.append('svg:rect')
  .attr('width', @x 100)
  .attr('height', @y 50)

node_drag = d3.behavior.drag().origin(Object).on('drag', @drag_move)
@nodes.call node_drag


drag_move: (d, i) ->
  console.log d3.event.target

浏览器控制台输出

function e(){this.on("mousedown.drag",t).on("touchstart.drag",t)}

如果我添加debugger语句并手动检查对象，则同样如此。由于某种原因，d3.event.target返回一个函数而不是事件对象。

Answer 1

我通过在dragmove函数中重置d3.event.target的值解决了这个问题：

d3.event.target = event.target;

然后d3.event.target成为函数的目标DOM元素instand，如drag（）......

Answer 2

我可以重新创建这个，我很想将它记录为一个bug - 我认为将拖动控件本身作为d3.event.target传递没有任何用处。

在这种情况下修复似乎很简单 - 只需调用rect选项上的拖动行为：

@rect = @nodes.append('svg:rect')
  .attr('width', @x 100)
  .attr('height', @y 50)

node_drag = d3.behavior.drag().origin(Object).on('drag', @drag_move)
@rect.call node_drag

但是，如果您的节点组中有多个元素并且想要了解哪些元素被拖动，我可能会觉得这很烦人。

d3事件目标

2 个答案: