在d3中拖動後始終禁止點擊事件

點擊和拖動事件的解耦在此處的一些先前的問題中進行了討論，例如， this one 在d3中拖動後始終禁止點擊事件

通常，建議在點擊處理程序中使用if (d3.event.defaultPrevented === false) {...}。但是，如果mouseup和mousedown不在同一個元素中，這似乎不起作用（至少在某些瀏覽器中）。 Consider this jsfiddle（代碼如下）。這是我想要的行爲：在SVG觸發器中的任意位置單擊事件（矩形閃爍），拖動SVG中的任何位置拖動矩形。觀察到的行爲（Chrome 33）：如果點擊的內容位於矩形內，並且mouseup位於外部，則會觸發拖動和點擊事件。如果mousedown和mouseup都位於內部或兩者都位於外部，則不會觸發單擊事件。

有人可以解釋爲什麼點擊事件觸發如果mouseup和mousedown不在同一個元素，以及如何可靠地防止這種情況發生？

var container, rect, dragBehavior; 

svg = d3.select('svg').attr("width", 500).attr("height", 300); 
container = 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); 

svg.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 + ')'); 
} 

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

function onClick(d) { 
    if (d3.event.defaultPrevented === false) { 
     console.log('onClick'); 
     flashRect(); 
    } else { 
     console.log("default prevented"); 
    } 
}

來源

2014-03-26 Leo Alekseyev

你的jsfiddle作品完全一樣，你想對我來說器（Chrome 32）小提琴鏈接。 –

我要求重播的每個人都使用Chrome 33;我會嘗試挖掘不同版本的Chrome。 –

@LeoAlekseyev你找到了aby修復？ – mhd

將dragBehavior添加到矩形而不是整個svg元素。這裏是修復http://jsfiddle.net/Mn4Uk/27/

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

來源

2015-06-22 02:14:37

在d3中拖動後始終禁止點擊事件

回答

相關問題