How to handle clicking behavior versus dragging behavior?

I'm working on an editor where my users can draw items on a viewport. The user can click on an item to see its properties. If a user would quickly click on two items in a short amount of time it is possible that this is registered as a drag (mousedown event, mousemove event, mouseup event), which in turn moves the item when the user did not intend it. This needs to be avoided.

So now i'm trying to define a drag. So i'm setting a timeout in my mouseDown event like so:

setTimeout(() => {
    this.mouseDown = true;
}, 50);

And i do a double check in my mousemove like so:

mouseMoved(event: MouseEvent) {
    if (event.buttons === 0) {
        this.mouseDown = false;
    }
    if (this.mouseDown)) {
        // do stuff
    }
}

Now my question is: Is there a way of knowing that this is correct? Every user handles a mouse differently of course. But is there a standardized way of doing this? A general rule of thumb?

Tags: