d3.js 中拖动后（有时）单击事件未触发

观察到的行为

我正在使用 d3.js，并且我想根据以下情况更新一些数据drag https://github.com/mbostock/d3/wiki/Drag-Behavior#wiki-on事件，并重绘事件之后的所有内容dragend https://github.com/mbostock/d3/wiki/Drag-Behavior#wiki-on事件。可拖动的项目也有一些click行为。

可拖动项目只能沿 x 轴移动。当拖动项目时，并且光标位于可拖动项目的正上方dragend/mouseup，该项目在重新绘制后必须单击两次click触发事件。当一个项目被拖动时，但是dragend/mouseup不直接出现在该项目的上方，click重绘后，事件按预期触发（第一次尝试）。

期望的行为

我想要click事件始终在拖动后第一次单击时触发，无论光标位于何处。

如果我更换click可拖动项目上的事件mouseup事件，一切都按预期进行，但是click这是我真正想处理的事件。

示范

这是一个独立的示例：http://jsfiddle.net/RRCyq/2/ http://jsfiddle.net/RRCyq/2/

这是相关的 JavaScript 代码：

var data, click_count,did_drag;
// this is the data I'd like to render
data = [
    {x : 100, y : 150},
    {x : 200, y : 250}
];
// these are some elements I'm using for debugging
click_count = d3.select('#click-count');
did_drag = d3.select('#did-drag');

function draw() {
    var drag_behavior,dragged = false;

    // clear all circles from the svg element
    d3.select('#test').selectAll('circle')
        .remove();

    drag_behavior = d3.behavior.drag()
        .origin(Object)
        .on("drag", function(d) {
            // indicate that dragging has occurred
            dragged = true;
            // update the data
            d.x = d3.event.x;
            // update the display
            d3.select(this).attr('cx',d.x);
        }).on('dragend',function() {
            // data has been updated. redraw.
            if(dragged) { draw(); }
        });

    d3.select('#test').selectAll('circle')
        .data(data)
        .enter()
        .append('circle')
        .attr('cx',function(d) { return d.x; })
        .attr('cy',function(d) { return d.y; })
        .attr('r',20)
        .on('click',function() {
            did_drag.text(dragged.toString());
            if(!dragged) {
                // increment the click counter
                click_count.text(parseInt(click_count.text()) + 1);
            }
        }).call(drag_behavior);
}

draw();

聚会有点晚了，但是……

文档建议您使用d3.event.defaultPrevented在你的click事件来了解元素是否刚刚被拖动。如果你把它与你的结合起来drag and dragend事件，一个更简洁的方法是在必要时调用您想要的确切函数（参见何时以及如何flashRect叫做）：

http://jsfiddle.net/langdonx/fE5gN/ http://jsfiddle.net/langdonx/fE5gN/

var container,
    rect,
    dragBehavior,
    wasDragged = false;

container = d3.select('svg')
    .append('g');

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

dragBehavior = d3.behavior.drag()
    .on('dragstart', onDragStart)
    .on('drag', onDrag)
    .on('dragend', onDragEnd);

container
    .call(dragBehavior)
    .on('click', onClick);

function flashRect() {
    rect.attr('fill', 'red').transition().attr('fill', 'black');
}

function onDragStart() {
    console.log('onDragStart');
}

function onDrag() {
    console.log('onDrag');

    var x = (d3.event.sourceEvent.pageX - 50);

    container.attr('transform', 'translate(' + x + ')');

    wasDragged = true;
}

function onDragEnd() {
    if (wasDragged === true) {
        console.log('onDragEnd');

        // always do this on drag end
        flashRect();
    }

    wasDragged = false;
}

function onClick(d) {
    if (d3.event.defaultPrevented === false) {
        console.log('onClick');

        // only do this on click if we didn't just finish dragging
        flashRect();
    }
}

我不喜欢全局变量，所以我修改为使用数据：http://jsfiddle.net/langdonx/fE5gN/1/ http://jsfiddle.net/langdonx/fE5gN/1/