D3区分具有拖动行为的元素的点击和拖动 [英] D3 Differentiate between click and drag for an element which has a drag behavior

问题描述

我无法在绑定到的元素上成功区分点击事件和 drag 事件都使用D3.js v3。下面的代码中的圆圈被分配一个拖动的行为，还有一个点击监听器。
在此演示

I am unable to successfully distinguish between the click event and the drag event on an element that is bound to both using D3.js v3. The circle in the code below is assigned a drag behaviour and also a click listener. Demo here

var dragGroup = d3.behavior.drag()
    .on('dragstart', function () {
    console.log('Start Dragging Group');
})
    .on('drag', function (d, i) {
    d.x += d3.event.dx;
    d.y += d3.event.dy;
    d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
});

var dragCircle = d3.behavior.drag()
    .on('dragstart', function () {
    d3.event.sourceEvent.stopPropagation();
    d3.event.sourceEvent.preventDefault();
    console.log('Start Dragging Circle');
})
    .on('drag', function (d, i) {
    d.cx += d3.event.dx;
    d.cy += d3.event.dy;
    d3.select(this).attr('cx', d.cx).attr('cy', d.cy);
});

var svg = d3.select('body').append('svg').attr('viewBox', '-50 -50 300 300');
var g = svg.selectAll('g').data([{
    x: 10,
    y: 10
}])
    .enter().append('g').call(dragGroup);

g.append('rect').attr('width', 100).attr('height', 100);

g.selectAll('circle').data([{
    cx: 90,
    cy: 80
}]).enter()
    .append('circle')
    .attr('cx', function (d) {
    return d.cx;
})
    .attr('cy', function (d) {
    return d.cy;
})
    .attr('r', 30)
    .call(dragCircle)
    .on('click', function () {
    console.log('clicked circle');
});

每当我点击示例中的圈子，我得到控制台记录拖动事件以及点击事件。拖动时也会得到相同的行为，首先记录拖动事件，然后在 mouseup 点击事件记录。

Whenever I click the circle in the example I get the console logging the drag event aswell as the click event. I also get the same behavior when dragging, first the drag event is logged and on mouseup the click event gets logged.

分开处理这些事件的正确方法是什么？

用例是尝试处理树形布局中的节点单击和节点拖放。

What is the correct way to handle these events separately?
The use case is an attempt to handle a node-click and a node-drag/drop in a tree layout.

推荐答案

缺少的关键位是检查事件的默认行为是否已被阻止。也就是说，有一个匹配的兄弟姐妹到 d3.event.preventDefault（） - d3.event.defaultPrevented 。您需要在您的点击处理程序中查看是否有任何拖动操作。

The key bit that's missing is the check whether the default behaviour of an event has been prevented. That is, there's a matching sibling to d3.event.preventDefault() -- d3.event.defaultPrevented. You need to check this in your click handler to see whether any dragging action is going on.

另请参见回答此问题。

这篇关于D3区分具有拖动行为的元素的点击和拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！