javascript - 如何检测特定元素上的鼠标输入方向

Question

我目前有一个功能可以检测鼠标进入的方向。它为每个部分返回一个整数 (0-3)，如下所示。

我试图弄清楚如何更改此函数以根据此插图生成输出：

基本上，我只是想弄清楚用户是从左侧输入图像还是从右侧输入图像。我已经尝试过几次尝试和错误，但我不太擅长这种类型的数学。

我已经设置了一个带有控制台输出的 JSFiddle作为示例。

确定方向的函数是：

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

where posis an object: {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);
}