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拖動與點擊

回答

相關問題