单击和拖动事件的解耦在之前的一些问题中讨论过,例如this one
通常,建议在点击处理程序中使用 if (d3.event.defaultPrevented === false) {...}
。但是,如果 mouseup 和 mousedown 不在同一个元素中,这似乎不起作用(至少在某些浏览器中)。 Consider this jsfiddle (下面的代码)。这是我想要的行为:单击 SVG 中的任意位置触发单击事件(矩形闪烁),拖动 SVG 中的任意位置拖动矩形。观察到的行为(Chrome 33):如果单击的 mousedown 在矩形内部,而 mouseup 在外部,则拖动和单击事件都会触发。如果 mousedown 和 mouseup 都在内部或都在外部,则不会触发 click 事件。
如果 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");
}
}
最佳答案
将 dragBehavior 添加到矩形而不是整个 svg 元素。 这是修复程序的 fiddle 链接 http://jsfiddle.net/Mn4Uk/27/
rect
.call(dragBehavior)
.on('click', onClick);
关于javascript - 在 d3 中拖动后始终抑制单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22649164/