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

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

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