Come rilevare la direzione del mouseenter su un elemento specifico

Question

Attualmente ho una funzione che rileva la direzione del mouse per entrare. Restituisce un numero intero (0-3) per ogni sezione come illustrato di seguito.

che sto cercando di capire come modificare questa funzione per produrre un output in base a questa illustrazione:

Fondamentalmente, voglio solo capire se l'utente sta entrando nell'immagine da sinistra o da destra. Ho avuto qualche tentativo di tentativi ed errori, ma non sono molto bravo in questo tipo di matematica.

Ho impostato un JSFiddle with a console output come esempio.

La funzione per determinare la direzione è:

function determineDirection($el, pos){ 
    var w = $el.width(), 
     h = $el.height(), 
     x = (pos.x - $el.offset().left - (w/2)) * (w > h ? (h/w) : 1), 
     y = (pos.y - $el.offset().top - (h/2)) * (h > w ? (w/h) : 1); 

    return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180))/90 + 3) % 4; 
} 

Dove pos è un oggetto: {x: e.pageX, y: e.pageY}, e $el è l'oggetto jQuery che contiene l'elemento di destinazione.

Answer 1

Sostituire return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180))/90 + 3) % 4; con return (x > 0 ? 0 : 1);

Un'altra opzione che mi piace di più (idea più semplice):

function determineDirection($el, pos){ 
    var w = $el.width(), 
     middle = $el.offset().left + w/2;   
    return (pos.x > middle ? 0 : 1); 
}