Question

此处的一些先前问题中讨论了点击和拖动事件的解耦，例如， this one

通常，建议在点击处理程序中使用if (d3.event.defaultPrevented === false) {...}。但是，如果mouseup和mousedown不在同一个元素中，这似乎不起作用（至少在某些浏览器中）。 Consider this 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);

在d3中拖动后始终禁止单击事件

1 个答案: