Question

174

D3 Mouse Events -- Click & DragEnd

rated 0 times [ 177] [ 3] / answers: 1 / hits: 32084 / 11 Years ago, sun, september 29, 2013, 12:00:00

In D3, if you defined a drag function like this:

var drag = d3.behavior.drag()

        .on(drag, function () {alert(drag)})

        .on(dragend, function () {alert(dragEnd)});

You really cannot do the following:

d3.select(#text1)

.on(click, function(d,i) {alert(clicked)})

.call(drag);

Reason is that the click will get fired after that the dragend will fire . In my opinion there should be a separate event for clicking because I see a huge difference between dragend and click.

To differentiate between clicking and end of a dragging event in an SVG element, what would be the solution?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sonja

Add To Favorites

Follow

Total Points: 541

Total Questions: 113

Total Answers: 114

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

sonja questions

1 Filtering table data for multiple columns Angular 10

Mon, Nov 30, 20, 00:00, 4 Years ago

1 Auto clear cache from browser

Sun, Oct 11, 20, 00:00, 4 Years ago

1 react-table has a issue with rendering in next.js

Thu, May 21, 20, 00:00, 4 Years ago

1 How to stop purging tailwind components

Sun, Nov 10, 19, 00:00, 5 Years ago

1 JS - String includes a substring that matches regex

Mon, Aug 26, 19, 00:00, 5 Years ago

View All

answered 11 Years ago megb · Accepted Answer

The documentation has some explicit examples for this:

When registering your own click listener on draggable elements, you can check whether the click event was suppressed as follows:

selection.on(click, function() {

  if (d3.event.defaultPrevented) return; // click suppressed

  console.log(clicked!);

});

This, along with the stopPropagation() example immediately afterwards, allows you to control which events are fired and handled.

To be clear, differentiating between a drag end and click event is entirely down to you. The easiest way to do this is probably to set a flag when dragging takes place and use that flag to determine whether a dragend or click event should be handled.