3

观察到的行为

我正在使用 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();
4

2 回答 2

6

派对有点晚了，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/

于 2013-09-26T16:57:38.117 回答
2

在观察到在我的 svg 圈子开始再次响应点击事件之前所需的点击可能发生在文档的任何地方之后，我决定采用一个 hack 来模拟文档上的点击事件（感谢https://stackoverflow.com/a /2706236/1015178 ) 拖动结束后。这很丑陋，但它有效。

这是模拟事件的函数（再次感谢https://stackoverflow.com/a/2706236/1015178）

function eventFire(el, etype){
  if (el.fireEvent) {
    (el.fireEvent('on' + etype));
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

这是更新的拖动行为：

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(); }
        // simulate a click anywhere, so the svg circles
        // will start responding to click events again
        eventFire(document,'click');
    });

这是我的骇人听闻的“修复”的完整工作示例：

http://jsfiddle.net/RRCyq/3/

于 2013-03-02T18:26:01.967 回答