在d3中拖動后始終禁止單擊事件

Question

在此處的一些先前問題中討論了點擊和拖動事件的解耦，例如這一問題

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

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

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");
    }
}

Answer 1

將dragBehavior添加到矩形而不是整個svg元素。 這是與修復http://jsfiddle.net/Mn4Uk/27/的小提琴鏈接

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