How to Distinguish Mouse "Click" and "Drag"

How to distinguish mouse click and drag

I think the difference is that there is a mousemove between mousedown and mouseup in a drag, but not in a click.

You can do something like this:

const element = document.createElement('div')
element.innerHTML = 'test'
document.body.appendChild(element)
let moved
let downListener = () => {
  moved = false
}
element.addEventListener('mousedown', downListener)
let moveListener = () => {
  moved = true
}
element.addEventListener('mousemove', moveListener)
let upListener = () => {
  if (moved) {
    console.log('moved')
  } else {
    console.log('not moved')
  }
}
element.addEventListener('mouseup', upListener)

// release memory
element.removeEventListener('mousedown', downListener)
element.removeEventListener('mousemove', moveListener)
element.removeEventListener('mouseup', upListener)

Detect single click events distinguished from click-and-drag or double-click-and-drag

Opinion piece

Whilst this might be doable, consider accessibility and how it'll fit into your projects needs. Navigation using onclick doesn't provide the same accessibility benefits, plus it requires a lot of reinventing things the browser can do for free.

I know that mobile devices typically allow a long press to access a text-select/context menu combo; on desktop, it'll vary per device/browser.

---

Actual answer

The only "detect click only" implementation I can think of would be using three handlers with mousedown, mouseup and mousemove. Untested code ahead!

let clicked = false;
document.addEventListener('mousedown', e => { clicked = true; });
document.addEventListener('mousemove', e => { clicked = false; });
document.addEventListener('mouseup', e => { 
    if(clicked) {
        // The mouse was clicked without moving it around!
        // Do your "only clicked" logic in here.
    }

    // Reset this back to false for next time
    clicked = false; 
});

How to differentiate between click and drag/drop event?

Also you could probably do something with the mousemove and mousedown events together to disable the click event:

var dragging = 0;

$('.drag').mousedown(function() {
    $(document).mousemove(function(){
       dragging = 1;
    });
});

$(document).mouseup(function(){
    dragging = 0;
    $(document).unbind('mousemove');
});

$('.class').click(function() {
    if (dragging == 0){
       // default behaviour goes here
    }
    else return false;
)};

C# distinguish Drag drop and Mouse click

Add a global boolean, for instance:

private bool isDragAndDrop;

Set it to false when loading the form. When the dragAndDrop event is fired you should set isDragAndDrop = true.

When the Click event is fired you check if(!isDragAndDrop) This will or will not execute the code inside the click event based on the value on the isDragAndDrop -variable.

Before leaving the click event you the set isDragAndDrop = false

Differentiate between mouse drag and mouse click/released

Mouse events are generated independently of one another.

I assume you panning code works with a combination of mousePressed/mouseMoved.

So you need to add some logic to indicate that you are in "panning mode". So if you have a mousePressed followed by a mouseMoved you set a Boolean variable to indicate "panning" mode.

Then in the mouseReleased code you need to check the variable. If "panning mode" then set "panning mode" off and return. Otherwise you are in "popup mode" so you can display the popup.

Paper.js Distinguish Click and Drag Events

When the mouse is clicked then released a click event is generated. When the mouse is held down and dragged, drag events are generated. I generally implement this by setting events on 'mousedown' and 'mouseup' in addition to 'mousedrag'.

Playing around I've found that if you return false from your 'mousedrag' event handler it will suppress further events, i.e., neither 'mouseup' nor 'click' will be invoked. Here's a sketch illustrating mouse events. If you uncomment the return false in the 'mousedrag' handler you will not get the 'mouseup' or 'click' events.

The following is example code for how I usually implement it - I didn't discover that returning false from the handler suppressed further processing until looking at the code tonight.

var drag;

view.on('mousedown', function(e) {
    drag = false;
});

view.on('mousedrag', function(e) {
    drag = true;
    // do whatever else you need to when dragging the mouse
});

view.on('mouseup', function(e) {
    // see if it was just a click and handle that
    if (drag) {
        // handle the end of a drag
    } else {
        // do whatever a click down/up without drag needs to do
    }

});

RxJS: distinguish single click from drag

You can use timeout (timeoutWith if you are using ReactiveX/RxJS)

var click$ = mousedown.flatMap(function (md) {
  return mouseup.timeoutWith(200, Observable.empty());
});

If the mouseup doesn't occur before the timeout it will just propagate an empty Observable instead. If it does then the downstream observer will receive an event.

Cross Browser detection of click vs mouse drag in JavaScript

I think I've resolved the issue by replacing mousemove with checking if there is any text selected, using this cross-browser function

var get_selected_text = (function() {
    if (window.getSelection || document.getSelection) {
        return function() {
            var selection = (window.getSelection || document.getSelection)();
            if (selection.text) {
                return selection.text;
            } else {
                return selection.toString();
            }
        };
    } else if (document.selection && document.selection.type != "Control") {
        return function() {
            return document.selection.createRange().text;
        };
    }
    return function() {
        return '';
    };
})();

---

Related Topics