通常,建议在单击处理程序中使用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");
    }
}