D3js拖动与点击

我正在用拖放编码d3js树并单击节点的功能。我遇到这个例子http://jsfiddle.net/langdonx/fe5gn/。D3js拖动与点击

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('dragend', 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(); 
    } 
}

但是这个例子不采取同样的方式对铬作为Firefox浏览器。当我点击矩形：

Chrome的输出继电器：ondrag当，OnDragEnd，的OnClick
火狐输出：的OnClick

当我拖放矩形：

Chrome的输出中：OnDrag，OnDragEnd
Firefox输出：OnDrag，OnDragEnd

有没有什么办法让点击时与Chrome浏览器的行为方式相同？

来源

2016-05-30 mhd

进出口使用铬和它beahaves如Firefox。如果你在onClick中使用'flashRect（）;'后添加了'd3.event.stopPropagation（）;'，那么它是否工作？ –

@TimB add stopPropagation to onClick函数什么都不会做，因为我需要停止onDrag并且onClick在onClick之前触发 – mhd

我猜'.on（'dragend'，onDragStart）'应该是'.on（'dragstart'，onDragStart） ' –

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

到

container 
     .on("mousedown", function() { 
       d3.event.stopPropagation(); 

       d3.select(this).on("mouseup", onClick); 
       d3.select(this).on("mousemove", function() 
       { 
        d3.select(this).call(dragBehavior); 
       }); 
      });

来源

2016-10-31 03:36:45

D3js拖动与点击

回答

相关问题