相关疑难解决方法(0)

在D3中,如果您定义了这样的拖动函数:

var drag = d3.behavior.drag()
        .on("drag", function () {alert("drag")})
        .on("dragend", function () {alert("dragEnd")});

你真的不能做到以下几点:

d3.select("#text1")
.on("click", function(d,i) {alert("clicked")})
.call(drag);

原因是点击将在"dragend"触发后被触发.在我看来,应该有一个单独的点击事件,因为我看到dragend和click之间的巨大差异.

要区分SVG元素中拖动事件的单击和结束,解决方案是什么？

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

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

正如标题所说，我有一个对象，我需要它的所有拖动和单击事件。有一些关于这个问题的讨论，但主要是关于点击和拖动事件。（并且回复小提琴没有正常工作）

我在这里有一个关于我在哪里的小提琴。当我拖动时，会阻止单击，但是当我单击时，会触发 dragstart 和 end 事件。我希望它们在我点击时不要触发，我希望在我想拖动时点击不要触发。

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');
});