如何检测特定元素上鼠标进入的方向？

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对象。

- ahren

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

- Tomer Arazy

---

哇，这太简单了（我会尽快接受）。这是 JSFiddle 链接，供其他人使用：http://jsfiddle.net/aBK5Q/2/。 - ahren

只是一个小问题的评论：你仍然无法确定mouseenter移动的方向，你只能确定光标最初进入图形的哪一半。所以，如果你快速移动鼠标，你可以从左侧进入图形，但最终停留在右半部分。如果你想处理这种行为，可能需要在每次mousemove事件中保存鼠标坐标，并将上一个坐标与mouseenter事件后的坐标进行比较。但我认为上面的答案对于任何实际情况都可以正常工作。 - basilikum