如何防止d3.drag（）。on（'end'从触发.on（'click' [英] How to prevent d3.drag().on('end' from firing .on('click'

问题描述

我有一个svg元素，我希望能够单独点击和拖动。据我所知，在D3中点击，点击拖动结束事件（也可能拖动开始？）。在下面的代码中，只需点击圆圈就会给它一个红色轮廓：

I have an svg element I'd like to be able to click and drag separately. As far as I can tell in D3, clicking fires the "drag end" event (and possibly also drag start?). In the code below, simply clicking the circle gives it a red outline:

var svg = d3.select('body').append('svg');
var g = svg.append('g');

var c = g.append('circle').attr('r', 20).attr('cx', 25).attr('cy', 25)
         .call(d3.drag().on('drag', dragged).on('end', end))
         .on('click', clicked);

function dragged() {
    d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
}

function end() {
    d3.select(this).attr('fill', 'red').attr('stroke', 'red').attr('stroke-width', 5);
}

function clicked() {
    if (d3.event.defaultPrevented) return;
    d3.select(this).attr('fill', 'blue');
}

小提琴

如何在不触发drag.end回调的情况下注册点击回调？

似乎大多数关于点击和拖动的问题和块似乎都想要抑制拖动时的点击操作，因此不相关。

fiddle

How do you register a click callback without triggering the drag.end callback?

It seems like most of the questions and blocks about clicking and dragging seem to want to suppress the click action on dragging, so are not relevant.

• d3v5.7（当前）

推荐答案

由于mouseup表示点击完成并且拖动结束，您可以跳过点击事件并简单地添加一些逻辑来确定是否有阻力发生：

Since mouseup indicates a click's completion and the end of a drag you could skip the click event and simply add some logic to determine if a drag occured:

// track action:
var wasMoved = false;

// Drag event:
function dragged() {
    d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
    wasMoved = true; // or alternatively, measure the change in distance.
}

// Mouse up event: drag end & click:
function end() {
  if(wasMoved) {
  // It was a drag:
        d3.select(this).attr('fill', 'red').attr('stroke', 'red').attr('stroke-width', 5);
  }
  // Otherwise it was a click:
  else {
    d3.select(this).attr('fill', 'blue');
  }
  wasMoved = false; // reset for next drag.
}

现在我们只能在mouseup上触发一个动作：拖动结束或我们想要的点击：

Now we can only trigger one action on mouseup: drag end or what we wanted on click:

var svg = d3.select('body').append('svg');
var g = svg.append('g');

var drag = d3.drag().on("drag", dragged).on("end",end);

var c = g.append('circle')
  .attr('r', 20).attr('cx', 25).attr('cy', 25)
  .call(drag)

var wasMoved = false;

function dragged() {
	d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
  wasMoved = true;
}

function end() {
  if(wasMoved) {
  // It was a drag:
		d3.select(this).attr('fill', 'red').attr('stroke', 'orange').attr('stroke-width', 5);
  }
  // It was a click:
  else {
    d3.select(this).attr('fill', 'blue');
  }
  wasMoved = false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js"></script>

这篇关于如何防止d3.drag（）。on（'end'从触发.on（'click'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！