正如标题所说,我有一个对象,我需要它的所有内容都是拖放事件。关于这个问题有一些讨论,但它主要涉及点击和拖动事件。(并且回复小提琴无法正常工作)
我在这里有一个小提琴,我在哪里。当我拖动时,单击被阻止,但是当我单击拖动时,开始和结束事件会触发。我希望它们在我单击时不要触发,我希望在我想拖动时单击不要触发。
var drag = d3.behavior.drag()
.origin(function(d){return d})
.on('drag', function(d){
d3.select(this).attr('cx', function(d){ return d.x += d3.event.dx });
d3.select(this).attr('cy', function(d){ return d.y += d3.event.dy });
console.log('dragging');
})
.on('dragstart', function(d){
d3.event.sourceEvent.stopPropagation()
console.log('drag start');
})
.on('dragend', function(d){
console.log('drag end');
})
// .....
MySvgElementWith3DStuffOnIt.on('click', function(){
if(d3.event.defaultPrevented) return;
console.log('clicked');
});
使用 d3v4 拖动模块的@thatOneGuy的小更新
https://jsfiddle.net/mhebrard/q5eL5qyv/
var drag = d3.drag()
.on('drag', function(d){
d3.select(this).attr('cx', function(d){ return d.x += d3.event.dx });
d3.select(this).attr('cy', function(d){ return d.y += d3.event.dy });
console.log('dragging');
})
.on('start', function(d){
console.log('drag start');
})
.on('end', function(d){
console.log('drag end');
})
您的示例按预期工作。查看更新的小提琴:https://jsfiddle.net/thatOneGuy/dd4nujxo/1/
我添加了一些控制台日志。当您拖动此行时:
if (d3.event.defaultPrevented) {console.log('return'); return};
将阻止触发点击事件。当您只单击时,dragstart
和dragend
被触发(如预期的那样),但drag
不会。这就是为什么您将代码用于在drag
函数中移动圆圈的原因。整个事情按预期工作:)