如何檢測鼠標在特定元素上的方向

Question

我目前有一個函數可以檢測鼠標輸入的方向。它會爲每個部分返回一個整數（0-3），如下所示。

我試圖找出如何改變這種功能來生成基於此圖的輸出：

基本上，我只是想，如果用戶要弄清楚正在從左側或右側進入圖像。我已經嘗試了幾次嘗試和錯誤，但我不擅長這種數學。

我已經設置了一個JSFiddle with a console output爲例。

來確定方向的功能是：

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; 
} 

凡pos是一個對象：{x: e.pageX, y: e.pageY}，和$el是含有目標元素的jQuery對象。

Answer 1

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

，我更喜歡（簡單的想法）另一種選擇：

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