在d3.js中单击"拖动后触发事件"(有时)

Question

观察到的行为

我正在使用d3.js,我正处于一种情况,我想根据drag事件更新一些数据,并在dragend事件发生后重绘所有内容.可拖动物品也有一些click行为.

可拖动项目只能沿x轴移动.拖动项目并且光标直接位于可拖动项目上方时dragend/mouseup,必须在重新绘制项目后单击该项目两次click才能触发事件.当项目被拖动但dragend/mouseup不直接发生在项目上方时,click事件在重绘后按预期(在第一次尝试时)触发.

期望的行为

click无论光标在哪里,我都希望在拖动后第一次点击时始终触发该事件.

如果我用click事件替换可拖动项目上的mouseup事件,一切都按预期工作,但这click是我真正想要处理的事件.

演示

这是一个独立的例子: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();

Answer 1

派对有点晚了,buuuut ......

文档建议您d3.event.defaultPrevented在click事件中使用以了解元素是否被拖动.如果将它与您的事件drag和dragend事件结合起来,更简洁的方法是在必要时调用您想要的确切函数(查看何时以及如何flashRect调用):

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/