question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

element.drag and element.click conflict

See original GitHub issue

I got some trouble with binding a drag event and a click event on the same elements :

set.click( function(){
    this.remove().clear();
});

set.drag(function(dx,dy){...},function(){...},function(){...});

when the drag end, the click event is catched … any idea ?

Issue Analytics

  • State:open
  • Created 9 years ago
  • Comments:5

github_iconTop GitHub Comments

3reactions
YealZoycommented, Jan 12, 2016

you can add click event to drag event in the third parameter “onend”,I tested when I clicked the element,the drag event “onstart” & “onend” happend,and you can set a flag ,when the event through the “onmove” you can set change the flag,I sorry my english is so poor,I must paste the code.

                            var tz_tag = true;
            elem.drag(function(dx,dy,x,y,event){

                tz_tag = false;

            },function(x,y,event){
                //拖动开始

            },function(event){
                //拖动结束
                    if(tz_tag){
                                                //do something
                                         }
                    tz_tag = true;


            });
1reaction
tobiascapincommented, May 1, 2016

For me a click event is a fast mouseDown+mouseUp without mouseMove between these events. During my tests I found that a click event is fired at mouseup at the end of the drag, for me this is an issue. If I’m dragging I’m not cliccking.

Let’s say that I select an element with click and I want to move selected element with drag, the effect is that at drag end I lose element selection because an unwanted click is fired on it (I made a workaround with a “isDragging” flag, with this flag I ignore a click if I’m dragging the element).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Add drag and click event conflicts to elements in d3?
Drag and click events are added to the element at d3. The first click requires that I click twice to trigger the click...
Read more >
Drag'n'Drop with mouse events - The Modern JavaScript Tutorial
Use event delegation to track drag start: a single event handler on document for mousedown . If elements are dragged to top/bottom window...
Read more >
How to differentiate mouse “click” and “drag” event using ...
When the element is dragged, a drag message is displayed just below the element in the web page itself. The click and drag...
Read more >
Drag & Click / D3 - Observable
You can disambiguate a click from a drag using event.defaultPrevented. Drag a circle below, or click it. Note you must not re-append the...
Read more >
draggable - 'click' triggered on drag - GSAP - GreenSock
Although is rather odd to have two click methods attached to the same element, any particular reason for that?. That's why Draggable has...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found