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

问题描述

我无法成功区分元素上的点击事件和拖动事件都使用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');
});

每当我点击示例中的圆圈时，我得到控制台日志记录 drag 事件以及单击事件。我也得到相同的行为，拖动时，首先拖动事件被记录，并在 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屋！