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

【问题标题】：How to detect mouseenter direction on a specific element如何检测特定元素上的鼠标输入方向
【发布时间】：2013-05-20 13:41:47
【问题描述】：

我目前有一个检测鼠标进入方向的功能。它为每个部分返回一个整数 (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 对象。

【问题讨论】：

标签： javascript math angle

【解决方案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);
}

【讨论】：

哇，太简单了（我会尽快接受）。这是其他人的 JSFiddle 链接：jsfiddle.net/aBK5Q/2
只是有点挑剔的评论：您仍然无法确定 mouseenter 移动的方向。您只需确定光标首先到达图形的哪一半。因此，如果您快速移动鼠标，您可以从左侧输入图形，但最终会进入右半部分。如果您想处理这种行为，您可能需要在每次 mousemove 时保存鼠标坐标，并将最后一个坐标与 mouseenter 事件之后的坐标进行比较。但我认为上述答案可能适用于任何现实生活中的案例。