D3区分具有拖动行为的元素的单击和拖动

D3 Differentiate between click and drag for an element which has a drag behavior(D3区分具有拖动行为的元素的单击和拖动)

问题描述

我无法成功区分使用 D3.js v3 绑定到两者的元素上的 click 事件和 drag 事件.下面代码中的圆圈被分配了一个拖动行为和一个 click 监听器.这里演示

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 事件以及 click 事件.拖动时我也得到相同的行为，首先记录 drag 事件，然后在 mouseup 上记录 click 事件.

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.您需要在 click 处理程序中检查这一点，以查看是否正在进行任何拖动操作.

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区分具有拖动行为的元素的单击和拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！