如何检测特定元素上的mouseenter方向

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