在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中拖动后始终禁止点击事件

回答

相关问题