How to determine the direction of mouse on mousemove event (top-left, top-right, bottom-left and bottom-right)

Question

I have found this question that answers how to determine mouse movement on up, right, down, and left but I need the diagonals rather than the four straight directions.

Here's my code:

var deltaX = window.mxShapeRes - event.offsetX,
    deltaY = window.myShapeRes - event.offsetY;

if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
    //left
} else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
    //right
} else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
    //up
} else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
    //down
}

I need to determine if the mouse is going top-left, top-right, bottom-left or bottom-right.

How can I do this with the given code?

Thanks for anyone that can help!

do you need to keep up,down,right,left or you only need the diagonals ? — jonatjano, Sep 05 '19 at 13:37
@jonatjano I think I only need the diagonals. Sorry about the confusion, will update the question — Zyx Sun, Sep 05 '19 at 13:40

score 2 · Accepted Answer · answered Sep 05 '19 at 13:42

You can combine conditions. E.g if mouse is moving top left then deltaX and deltaY would be > 0.

if (deltaY > 0 && deltaX > 0) {
    // top - left
} else if (deltaY > 0 &&  && deltaX < 0) {
    // top - right
} else if (deltaY < 0 &&  && deltaX > 0) {
    // bottom - left
} else if (deltaY < 0 &&  && deltaX < 0) {
    // bottom - right
}

How to determine the direction of mouse on mousemove event (top-left, top-right, bottom-left and bottom-right)

1 Answers1